悬停时的jQuery淡出div。链接不可选择

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

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

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

例如：

---

如何使链接可选？

尝试将jQuery更改为：

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

---

工作小提琴：

尝试将jQuery更改为：

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

---

工作小提琴：

更改了一些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");
  });
});

#容器{
宽度：166px；
}
#隐藏的{
位置：绝对位置；
排名：0；
左：0；
高度：300px；
宽度：166px；
背景：红色；
显示：无；
}
$（文档）.ready（函数（）{
$（“#容器”）.hover（函数（）{
$（“隐藏”）.fadeToggle（“快速”）；
});
});

更改了一些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");
  });
});

#容器{
宽度：166px；
}
#隐藏的{
位置：绝对位置；
排名：0；
左：0；
高度：300px；
宽度：166px；
背景：红色；
显示：无；
}
$（文档）.ready（函数（）{
$（“#容器”）.hover（函数（）{
$（“隐藏”）.fadeToggle（“快速”）；
});
});

使用jquery fade只会更改元素的不透明度

因此，覆盖的img仍然位于链接顶部，但其不透明度仅为0

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

display:none

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

这是一个jsfilddle

---

使用jquery fade只会更改元素的不透明度

因此，覆盖的img仍然位于链接顶部，但其不透明度仅为0

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

display:none

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

这是一个jsfilddle

我最好把图像放到

div

将不同的事件分配给

div

和

img

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

<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");
  });
});

我最好把图像放到

div

将不同的事件分配给

div

和

img

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

---

鼠标悬停时不会变为旧状态鼠标悬停时不会变为旧状态如果将鼠标快速移动到div上几次，它会被卡住如果将鼠标快速移动到div上几次，它会被卡住是的，这是一种工作状态w/class'。这将需要更多的工作。我建议取出javascript并将img设置为display:none，然后找出如何使链接可点击。通过css。使用css设置您的最终状态。。然后使用jquery在状态之间转换。如果有多个图像，我稍微修改了代码。有点小问题，但在我的网站上对我有效。是的，这是一种“工人阶级”。这将需要更多的工作。我建议取出javascript并将img设置为display:none，然后找出如何使链接可点击。通过css。使用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");
  });
});