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淡入淡出只会改变元素的不透明度

所以叠加的img仍然位于链接的顶部，但其不透明度仅为0.

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

的div

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

这是一个jsfilddle 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代码，请查看 demo

<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

我最好把图片放在div

为div和img

分配不同的事件

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

<强> LIVE DEMO

jQuery在悬停时淡出div。链接无法选择

4 个答案: