关于更改图片使用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

你把background-image放在盒子上，但是：悬停在a上。现在，您正在更改链接的背景图像，而不是链接的背景图像。

要么把

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

或

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

Answer 2

你正在改变锚元素，而不是它的父列表项的背景。这应该如果使用

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

你也不需要重新指定元素的宽度和高度，因为他们已经被定义，甚至应该在悬停状态保留来解决。