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); 
  }
 );

悬停（）不按预期工作

2 个答案: