图片鼠标滑动实现替换

<style>
    .img_content{
      width: 65px;
      height: 58px;
      display: inline-block;
      float: left;
      margin-right: 8px;
    }
    .t_images{
      list-style: none;
      float: left;
      height: 49px;
      width: 218px;
      display: inline;
      margin: 1px 2px 0 0;
      border: #b9b9b9 solid 1px;
      overflow: hidden;
      background: #fff;
    }</style>
<div class="t_images">
<span class="img_content" style="background: rgba(0, 0, 0, 0) url('http://top.gangzhao.top/fute.jpg') no-repeat scroll center bottom;"> 
　　<img src="http://top.gangzhao.top/fute.jpg" alt="雪铁龙" style="opacity: 1; display: inline;" />
</span>
</div>
<p>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
 $(function () {
            //JQuery 悬停事件
            $("img").hover(
                    //第一个函数，鼠标悬停时触发
                    function () {
                        $(this).css("opacity", "0");//改变透明度
                        $(this).css("display", none);//改变透明度
                    },
                    //第二个函数，鼠标移开时触发
                    function () {
                        $(this).css("opacity", "1");//改变透明度
                        $(this).css("display", inline);//改变透明度
                    }
            );
        });
</script>
</p>