Question

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

这里的想法是HTML＆lt; img＆gt;在鼠标悬停时隐藏并淡入，以提供平滑的效果。

同时，CSS背景显示在开头。

HTML：

＆lt; div id =“nav”＆gt;

＆lt; a href =“blah”id =“id1”＆gt;

＆lt; img src =“hoverimg.png”alt =“链接文字1”   /＆GT; ＆LT;跨度＆GT;链接文字1   ＆LT; /跨度＆GT; ＆LT; / A＆GT;

＆lt; img src =“hoverimg2.png”alt =“链接文字2”   /＆GT; ＆LT;跨度＆GT;链接文字2   ＆LT; /跨度＆GT; ＆LT; / A＆GT;

＆LT; / DIV＆GT;

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

只需在图片html中添加style="display: none;" attr，然后使用：

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

（如果显示/隐藏不是您需要的，则根据需要修改效果）

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

1 个答案: