懸停（）不像預期的那樣工作

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