jquery - jQuery 在悬停时淡出 div。链接不可选

Question

我正在使用 jquery 在悬停时淡化 div，但是一旦显示锚链接就无法选择。

$('#show').hover(function() {
    $(this).stop(true).fadeTo("slow", 0);
}, function() {
    $(this).stop(true).fadeTo("slow", 1);
});

看起来褪色的 div 实际上仍然位于隐藏的 div 之上。

示例：http: //jsfiddle.net/BJwn7/81/

如何使链接可选择？

Answer 1

使用 jquery fade 只是改变元素的不透明度

所以覆盖的 img 仍然在链接的顶部，但它的不透明度仅为 0。

淡入淡出后，您需要隐藏将其样式设置为的 divdisplay: none

$('#container').hover(function() {
    $('#show').stop(true).fadeTo("slow", 0, function() { $(this).hide(); });
}, function() {
    $('#show').stop(true).fadeTo("slow", 1, function () { $(this).show(); });
});

这是一个 jsfiddle http://jsfiddle.net/ddvcJ/

Answer 2

尝试将 jQuery 更改为：

$('#container').hover(function() {
    $('#show').fadeOut("slow");
}, function() {
    $('#show').fadeIn("slow");
});

工作小提琴：http: //jsfiddle.net/BJwn7/86/

Answer 3

更改了一些 css 和 jquery 代码查看此演示

<div id="container" style="position: relative">
    <img id="show" src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="" height="300px"/>
    <div id="hidden"><a href="#">link</a></div>
</div>


#container {
    width: 166px;
}
#hidden {
    position: absolute;
    top: 0;
    left: 0;
    height: 300px;
    width: 166px;
    background: red;
    display:none;
}

$(document).ready(function(){
  $("#container").hover(function(){
    $("#hidden").fadeToggle("fast");
  });
});

Answer 4

1. 我最好把图片放下div

2. 将不同的事件分配给div和img

   $('#show').mouseenter(function() {
       $(this).stop(true).fadeOut("slow");
   });
   $('#hidden').mouseleave(function() {
       $('#show').stop(true).fadeIn("slow");
   });
   

现场演示