jQuery在鼠标悬停时淡入/淡出？

Question

我在以下结构中有链接,我想知道jQuery/css应该是什么来隐藏<img />标记并在鼠标悬停时淡入它们.

这里的想法是HTML <img>被隐藏并在鼠标悬停时淡入以提供平滑的效果.

同时一个CSS背景在开头显示.

HTML:

<div id ="nav">

<a href="blah" id="id1">

<img src ="hoverimg.png"alt ="链接文字1"/> <span>链接文字1 </ span> </a>

<img src ="hoverimg2.png"alt ="链接文字2"/> <span>链接文字2 </ span> </a>

</ 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将多次运行动画.有办法阻止这个吗？

Answer 1

只需style="display: none;"在图像html中添加一个attr,然后使用:

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

(如果显示/隐藏不是您需要的,请根据需要修改效果)