2

我在以下结构中有链接，我想知道 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 将多次运行动画。有没有办法阻止这种情况？

4

1 回答 1

5

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

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

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

于 2010-03-10T04:37:17.860 回答