jQuery淡入/出鼠標懸停？

我有以下結構中的鏈接，我想知道什麼jQuery/css應該隱藏<img />標記並使其在mouseover上淡入。jQuery淡入/出鼠標懸停？

這裏的想法是隱藏HTML並在淡出鼠標懸停以提供平滑的效果HTML <img>。

同時一個CSS背景顯示在開頭。

HTML：

< DIV ID = 「NAV」 >

< A HREF = 「等等」 ID = 「ID1」 >

< IMG SRC =「hoverimg。 png「alt =」鏈接文本1「 /> <範圍>鏈接文本1 < /跨度> < /一個>

< IMG SRC = 「hoverimg2.png」 ALT = 「鏈接文本2」 /> <跨度>鏈接文本2 < /跨度> < /一個>

</DIV >

CSS：

#nav a span{ 
    display: none; /* Hide the text reader title */ 
} 

#nav a { 
    display: block; 
    height: 200px; 
    width: 250px; 
    background url("bgimage.png"); /* I would ideally use the # selector for individual links.. */ 
} 

#nav a img{ 
    /* what goes here so that jQuery works and so that we can backwards compatibility a:hover effect? */ 
}

的jQuery：

???

在一個側面說明，我已經注意到，jQuery將運行一個動畫多次，如果目標元素是嵌套在幾級的子節點深。有沒有辦法阻止它？

來源

2010-03-10 Moshe

@Moshe：您有一個開放但兩個關閉。另一個在第二個之前打開的位置？ – Ergec 2010-03-10 06:32:42

類型，我「手寫」&gt等等... – Moshe 2010-03-11 15:42:31

只需添加一個style="display: none;" ATTR到圖像的HTML，然後使用此：

 $("#nav").hover(
      function() { 
       $("img", this).show(); 
      }, 
      function() { 
       $("img", this).hide(); 
      });

（修改您的需求影響，如果顯示/隱藏是不是你所需要的）

來源

2010-03-10 04:37:17 psychotik

這將淡入或只是表明它？ – Moshe 2010-03-10 04:49:11

這會顯示。使用http://api.jquery.com/fadeIn/淡入和http://api.jquery.com/fadeOut/淡出。 – psychotik 2010-03-10 05:54:07

我把'$（「＃nav」）'改成了'$（「＃nav a」）'，它工作正常。在我做這件事之前，當我徘徊在其中一個鏈接上時，所有鏈接都會點亮。 – Moshe 2010-03-11 15:42:02

jQuery淡入/出鼠標懸停？

回答

相關問題