THE HAM MEDIA BLOG

imgを画像置換で直接ロールオーバーさせる時のちらつきをなくすCSSの設定方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
CSS
ロールオーバー
rollover

imgを画像置換で直接ロールオーバーさせる時のちらつきをなくすCSSの設定方法

以前『二つの画像とCSSやjQueryで表現する3種類のロールオーバー
というのをエントリーしたのですが、
サンプルで作った「imgを直接ロールオーバー」というのが
なんだかちらちら。そして少しぶれて動く。
単にデフォルトでボーダーがついているので、その問題なのですが、
そうじゃないにしろ、FirefoxやOperaで見たときに、
画像やマウスがちらついてみえたりする設定になってしまっていた。

ということで修正してみる!

まずは前のと同じCSS

前のと一つだけ変えて、ボーダー設定だけはリセットします。

CSS

img{  
    border: none;  
}  
p{  
    background:url(rollover_on.gif) no-repeat 0 0;  
    display:block;  
    width:250px;  
    height:80px;
    margin:0 auto;
}  
p a:hover {  
    background-color:transparent;  
}  
p a:hover img{  
    visibility:hidden;  
}  

プレビュー

ロールオーバー画像

IE6でみると何も問題はないのですが、
FirefoxとかOpera、Safariでみるとちらついてみえる。

その問題がでないように修正してみる。

修正後

CSS

img,img a{  
    border: none;  
}  
p{
    display:block;
    background:url(rollover_on.gif) no-repeat 0 0; 
    width:250px;  
    height:80px;
}

p a{
    display:block;
    width:250px;  
    height:80px;
}
    
p a:hover {  
    background-color:transparent;  
} 
    
p a:hover img{
    visibility:hidden;
}

プレビュー

ロールオーバー画像

これでどちらもちらつかない。
ポイントは、imgについているa要素にも幅とか高さを指定すること。
これだけで解決する。

ただし、a要素に指定するなら、そっちだけに指定まとめても、
ちゃんと表示されるんじゃないの?
なんて思ってしてみたのですが、
それだとIEだと動かなくなってしまうのです。

そのロールオーバーしなくなる例も載せておきます

IEだとロールオーバーしなくなるCSS

CSS

img,img a{  
    border: none;  
}  

p a{
    display:block;
    background:url(rollover_on.gif) no-repeat 0 0; 
    width:250px;  
    height:80px;
}
    
p a:hover {  
    background-color:transparent;  
} 
    
p a:hover img{
    visibility:hidden;
}

IEだとロールオーバーしないプレビュー

ロールオーバー画像

自分でチェックしたのはIE6ですが、それはロールオーバーしなくなります。
他のブラウザだときちんとロールオーバーするのですが、
なぜかIEだとロールオーバーしなくなってしまいます。

なので、a要素だけでなく、
必ずそれをかこっているp要素に指定してください。

そして下記のような場合でも、
IEでロールオーバーしなくなってしまうので注意です。

IEだとロールオーバーしなくなるCSS その2

CSS

img,img a{  
    border: none;  
}  
p{
    display:block;
    width:250px;  
    height:80px;
}

p a{
    display:block;
    background:url(rollover_on.gif) no-repeat 0 0; 
    width:250px;  
    height:80px;
}
    
p a:hover {  
    background-color:transparent;  
} 
    
p a:hover img{
    visibility:hidden;
}

IEだとロールオーバーしないプレビュー その2

ロールオーバー画像

これをみてわかるように、backgroundの指定は、
a要素ではなく、p要素にしなくてはなりません。
a要素にいれてしまうと、この場合も
IEだとロールオーバーしなくなってしまいます。

つまり、p要素には背景も高さも全部指定し、
a要素には背景は入れずとも、高さや横幅などは指定する。
これがimgをロールオーバーするために必要なCSSの設定です。

この記事へのコメント
貴重な情報どうもありがとうございます。
おかげで、ホーバー時のちらつきが解消されました。
Posted by tsukishimaao at 2014年10月11日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。