關於更改圖片使用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'); } 

你也不需要重新指定元素的寬度和高度，因爲他們已經被定義，甚至應該在懸停狀態保留來解決。