- ベストアンサー
画像とCSSを使ったロールオーバーについて
お世話になります。 背景が白いページに 透過gifファイルをhtmlファイルに img src で埋め込んでいます。 ロールオーバー時に、 その画像の下？にうすい色をかぶせるような感じにしたいのです。 そういうことは、CSSだけでできるのでしょうか？ もしできるのならばその場合 画像の下に色がくるのでしょうか？ それとも画像の上に薄く透過がかかった色をのせることになるのでしょうか？ 教えてください。よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
> もしできるのならばその場合 > 画像の下に色がくるのでしょうか？ > それとも画像の上に薄く透過がかかった色をのせることになるのでしょうか？ 画像の背景（透明）部分の色が変化します。 > IE6ではa以外のhover擬似クラスが使えなかったかもしれません 使えないです。 IE6以前でも使えるようにするとしたら…、こういう感じかなぁ？かな～り大雑把ですが。 CSS .test{width:200px;} .test:hover{ background:#F0F0F0;} .test a:hover{ background:#F0F0F0;} HTML <p class="test"><a href="#"><img src="test.gif"></a> （test.gifが幅200pxの画像だと仮定）
その他の回答 (2)
- himajin100000
- ベストアンサー率54% (1660/3060)
サンプルソースでは、title要素をFloating divs in Print Previewにしてしまいましたが,全然関係ありません。最近回答した質問のテンプレを使ったからです(汗
- himajin100000
- ベストアンサー率54% (1660/3060)
WALKAROUND 自分で透過GIFを作るのが面倒だったので http://www.para-gallery.com/season/archives/2007/03/1_2.html の一番上の画像を使いました。 ==========同じフォルダ内に先ほどの画像と以下のソースのXHTMLを配置し、閲覧してみましょう。マウスがhoverしているときに透過色の部分が赤くなるはずです================= <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Floating divs in Print Preview</title> <style type="text/css"> p:hover{background-color:red;} </style> </head> <body> <p><img src="kabut1_1.gif" alt="kabut1_1.gif" /></p> </body> </html> ====================== 実験はIE7とMinefieldで行いましたが,IE6ではa以外のhover擬似クラスが使えなかったかもしれません
お礼
早々とご回答いただきましてありがとうございました！ 単純に background-color を使えばいいだけなのですね。 自分でもう少し調べて試してみたらよかったですね(^^; すみません。。 ありがとうございました！ うまくできました！ WinXP pro sp2のIE6 とFirefox2.0で確認しました。
補足
あ。えと。質問者ですが。 付け加えです。 a:hover でできました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
早々とご回答いただきましてありがとうございました！ 単純に background-color を使えばいいだけなのですね。 自分でもう少し調べて試してみたらよかったですね(^^; すみません。。 ありがとうございました！ うまくできました！ WinXP pro sp2のIE6 とFirefox2.0で確認しました。