悬停（）不像预期的那样工作

Question

我有一个像下面这样的列表元素，我试图用jQuery来定位图像元素。发生的事情是它将span元素和img上移15个像素，而不仅仅是图像。

但是，如果我将span元素移动到HTML中的img之前，它将正确定位图像元素。这是为什么发生？

<ul class="mainnav"> 
    <li> 
     <a href="#"> 
      <div class="circles"><img src="/bootstrap_a/img/web_icon/blog_i.png"></div> 
      <span>Blog</span> 
     </a>       
    </li> 
<ul> 

$(".mainnav li a").hover(
    function() { 
     $(this).find('img').stop().animate({ marginTop: "-15px" }, 250); 
    }, 
    function() { 
     $(this).find('img').stop().animate({ marginTop: "0px" }, 250); 
    } 
); 

Answer 1

没有改变任何东西，这里是一个相对肮脏的修复。

http://jsfiddle.net/rDQkS/

下边距设置动画相同量推跨度走，使它看起来像只图像移动。

$(".mainnav li a").hover(
    function() { 
    $(this).find('img').stop().animate({ marginTop: "-15px", marginBottom: "15px" }, 250); 
    }, 
    function() { 
    $(this).find('img').stop().animate({ marginTop: "0px", marginBottom: "0px" }, 250); 
    } 
);​ 

Answer 2

你还没有关闭<img>标签的第一个。所以请确保您关闭它。

$(".mainnav li a").hover(
    function() { 
    $(this).find('div img').stop().animate({ marginTop: "-15px" }, 250); 
    }, 
    function() { 
    $(this).find('div img').stop().animate({ marginTop: "0px" }, 250); 
    } 
);