Question

我正试图让左边的两个图标在悬停时向左移动。谁能告诉我为什么它不起作用？这是小提琴http://jsfiddle.net/JLfvz/ 这是HTML

<div id="socials">
  <a href="http://twitter.com/" title="Twitter" class="social"><img     src="http://www.dot.state.oh.us/groups/ohol/PublishingImages/twitter-icon.gif"  alt="Twitter"></a>
  <a href="http://facebook.com/" title="Facebook"><img src="images/fb.png" alt="Facebook"></a><br>
  <a href="http://youtube.com" title="You Tube" class="social"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRvpJGY5jiR_SO4Hp2d6unwHcR3J-2vHxYOQ_-rVs8ZxUW8Mn5T6UNI1i0L" alt="youtube"></a>
  <a href="http://linkdin.com" title="Linkd In"><img src="images/in.png" alt="linkdin"></a>

  </div>

Answer 1

您需要更新子img元素的css，而不是顶级a.social元素：

$(document).ready(function(){
    $(".social").hover(function(){
        $(this).children().css("left","0");
    },function(){
        $(this).children().css("left","30px");
    });
});

更新了演示：http://jsfiddle.net/JLfvz/2/

使用jquery悬停时移动图像

1 个答案: