2 
<style type="text/css">
ul,li{ padding:0; margin:0; overflow:hidden;}
li{ list-style:none;}

img{ border:0;}
.box{ width:950px;}
.box li{ float:left; width:300px; height:250px; margin-right:10px; margin-bottom:20px;}
#box_img1 {width: 300px;
   height: 250px;background-image: url('support.png');}
#box_img1 a:hover {width: 300px;
   height: 250px;background-image:url('GotJobButton.png');}
#box_img2 {width: 300px;
   height: 250px;background-image: url('support.png');}
#box_img2 a:hover {width: 300px;
   height: 250px;background-image:url('object.png');}
</style>

<ul class="box">
<li id="box_img1"><a href="features/businesses"></a></li>
 <li id="box_img2"><a href="features/nonprofits"></a></li>
</ul>

質問: マウスオーバーで絵が変わるようにしたいです。しかし、うまくいかないので、何がうまくいかないのでしょうか?

4

2 に答える 2

2

親リスト項目ではなく、アンカー要素の背景を変更しています。これは、使用する場合に解決する必要があります

#box_img1:hover { background-image:url('GotJobButton.png'); }
#box_img2:hover { background-image:url('object.png'); }

また、要素の幅と高さを再指定する必要はありません。それらは既に定義されており、ホバー状態でも保持される必要があるためです。

于 2013-04-29T01:25:40.347 に答える
1

をボックスに置きbackground-imageますが、:hover は a に置きます。現在、リンクの背景画像ではなく、リンクの背景画像を変更しています。

どちらかを置く

#box_img1 a { // current code + display: block; }

また

#box_img1:hover { // but not sure if this is allowed/supported across all browsers }
于 2013-04-29T01:25:19.130 に答える