jquery移入移除的问题

我想鼠标移入变成另外一张图片，求指点

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  <link rel="stylesheet" href="css/css.css" />

 </head>
 <body>




<div class="sideFx">
      <ul>
        <li id="new1">
        <a href="">
            <div ><img src="img/facebook.png" /></div>
        </a>
        </li>
        <li id="new2">
        <a href="http://weibo.com/pkuih">
            <div><img src="img/twitter.png" /></div>
        </a>
        </li>
        <li id="new2">
        <a href="javascript:;">
            <div><img src="img/twitter.png" /></div>
        </a>
        </li>
      </ul>
</div>






<script language="javascript">

$("#new1 img").hover(function(){
$(this).css("background","url(img/facebook-2.png)");

</script>




 </body>
</html>

javascript$('.sideFx a').on('mouseover',function(){
    $(this).find('img').attr('src','xxxxx.jpg');
});

其实这里用背景图做更好啊。。直接css的:hover就可以换掉了。都不需要js。而且你a标签里也没必要放个div吧？意义何在

CSS的:hover实现，鼠标离开时能自动还原：https://jsfiddle.net/dwqs/86gvetwb/

JQuery实现，则要监听鼠标移入和移出事件：https://jsfiddle.net/dwqs/vhostduz/

建议用CSS Sprite来做，这样利用hover改变background-position就行，而不是用三张图片。

CSS Sprites generator

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  <link rel="stylesheet" href="css/css.css" />

</head>
<body>



<div class="sideFx">
      <ul>
        <li>
        <a>
            <div><img class="pic" width="50" height="50" src="http://pic27.nipic.com/20130130/11901137_154815354175_2.png" hsrc="http://www.baidu.com/img/bd_logo1.png" /></div>
        </a>
        </li>
        <li>
        <a href="http://weibo.com/pkuih">
            <div><img class="pic" src="img/twitter.png" /></div>
        </a>
        </li>
        <li>
        <a>
            <div><img class="pic" src="img/twitter.png" /></div>
        </a>
        </li>
      </ul>
</div>





<script>
$(function(){
    $('.sideFx .pic').hover(function(){
        $('.sideFx').data('tmpsrc', $(this).attr('src'));
        $(this).attr('src', $(this).attr('hsrc'));
    }, function(src){
        $(this).attr('src', $('.sideFx').data('tmpsrc'));
    })
})
</script>


</body>
</html>

参考第一张图

<div>能放在&lta>里？内联元素里只能放置文本或者其他内联元素，可以直接将图片设为背景嘛，用:hover更换背景

【热门文章】