imgを画像置換で直接ロールオーバーさせる時のちらつきをなくすCSSの設定方法
以前『二つの画像とCSSやjQueryで表現する３種類のロールオーバー』
というのをエントリーしたのですが、
サンプルで作った「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 その２
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だとロールオーバーしないプレビュー その２
これをみてわかるように、backgroundの指定は、
a要素ではなく、p要素にしなくてはなりません。
a要素にいれてしまうと、この場合も
IEだとロールオーバーしなくなってしまいます。
つまり、p要素には背景も高さも全部指定し、
a要素には背景は入れずとも、高さや横幅などは指定する。
これがimgをロールオーバーするために必要なCSSの設定です。
おかげで、ホーバー時のちらつきが解消されました。