- ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：CSSでマウスオーバーを作成しています。）
CSSでマウスオーバーを作成する方法
このQ&Aのポイント
- CSSでマウスオーバーを作成する方法について説明します。
- マウスオーバー時に表示する画像が正しく表示されない場合、画像パスの設定を確認してください。
- また、マウスオーバー時に背景色や背景画像を変更するためには、CSSの:hoverを使用する必要があります。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
[CSS] * { margin:0;padding:0; } div {text-align:center;} ul#test li { list-style-type: none; } #test a { text-decoration: none; display: inline-block; width: 200px; height: 400px; background: url(bg.gif) no-repeat 0 0; /* ----- 最初 */ } #test a:hover { background-position: -200px 0; /* ----- マウスオーバー時 */ } [/CSS] bg.gif - 400px × 400px ・(0px - 200px) × 400px : inital image ・(200px - 400px) × 400px : hover image
お礼
返事有り難うございます。 上記の通りCSSを #info_all { margin: 0; padding: 0; list-style-type: none; } * { margin:0;padding:0; } div { text-align:center; } ul#info_all li { list-style-type: none; } #info_all a { text-indent: -9999px; text-decoration: none; display: inline-block; width: 713px; height: 444px; background: url(img/info_all.bmp) no-repeat 0 0; /* ----- 最初 */ } #info_all a:hover { background: url(img/info_ov.bmp) no-repeat 0 0; / background-position: -713px 0; /* ----- マウスオーバー時*/ } としたんですが、FIREFOXでは表示されるのにIEでは何も表示されない状態になりました。 HTML内は変えていません。 最初はinfo_all.bmpという画像を表示させておいて、マウスオーバーでinfo_ov.bmp に切り替えるという形を目指しているんですが・・・。
補足
何度もすいません。 シンプルに作り直して CSSを #info_all { margin: 0; padding: 0; list-style-type: none; } #info_all a { text-indent: -9999px; text-decoration: none; display: inline-block; width: 713px; height: 444px; background: url(img/info_all.bmp) no-repeat 0 0; /* ----- 最初 */ } #info_all a:hover { background: url(img/info_ov.bmp) no-repeat 0 0; } HTMLを <BODY> <div align="center"> <div id="info_all"> <a href="***.html">Home</a> </div> </div> </BODY> に書き換えてみましたがそれでも、IEでは画像の表示はできませんでした。