jquery - 悬停（）没有按预期工作

Question

我有一个如下所示的列表元素，我正在尝试使用 jQuery 来定位图像元素。发生的事情是它将span元素和img向上移动了 15 个像素，而不仅仅是图像。

但是，如果我在 HTML 中移动span元素之前，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); 
  }
 );