Question

css鼠标悬停时，换图片

<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

<a  class='up'  ><img class='img-up' src='/images/black-up.png' /></a>

$(".up").mouseover(function(){
   $(this).find("img").attr('src', '/images/white-up.png');
});
$(".up").mouseout(function(){
   $(this).find("img").attr('src', '/images/black-up.png');
});