jQuery的淡入/淡出鼠标悬停？

Question

我有以下结构链接，我想知道的jQuery / CSS应该是隐藏<img />标签和褪色他们在鼠标悬停什么。

这里的想法是，HTML 是隐藏的，在淡出的鼠标悬停以提供平滑的效果。

同时一个CSS背景显示在开始。

<强> HTML：

  

     

     

<跨度>链接文本1   

     

<跨度>链接文本2   

     

<强> 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;" ATTR到图像HTML，然后使用这样：

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

（修改您的需求影响，如果显示/隐藏是不是你所需要的）