css - 关于使用 css 更改图片的代码不起作用

Question

<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>

问题：我想让它在鼠标悬停时改变图片。但它不起作用，那么这里出了什么问题？

Answer 1

您正在更改锚元素的背景，而不是其父列表项。如果您使用，这应该解决

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

您也不需要重新指定元素的宽度和高度，因为它们已经定义并且即使在悬停状态下也应该保留。

Answer 2

您将background-image:hover 放在盒子上，但将 :hover 放在 a 上。现在，您正在更改链接的背景图像，而不是链接的背景图像。

要么放

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

或者

#box_img1:hover { // but not sure if this is allowed/supported across all browsers }