codes about change picture using css does not work - 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"></li>
<li id="box_img2"></li>
</ul>
Question:
I want to make it change picture on mouseover. But it does not work, so what goes wrong here?

Answer 1

You are changing the background of the anchor element, not its parent list item. This should be resolved if you use
#box_img1:hover { background-image:url('GotJobButton.png'); }
#box_img2:hover { background-image:url('object.png'); }
You also do not need to respecify the width and height of the element, as they have already been defined and should be retained even in the hover state.

Answer 2

You put the background-image on the box, but the :hover on the a. Right now, you're changing the background-image of the link, instead of the background image of the link.
Either put
#box_img1 a { // current code + display: block; }
or
#box_img1:hover { // but not sure if this is allowed/supported across all browsers }