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淡入/出鼠标悬停？

回答

相关问题