Question

在我的项目中，切换功能多次切换。我认为这是因为一个绝对定位的div应该淡出一个。我无法解决这个问题......

这里是jQuery-Code：

var $j = jQuery.noConflict();

$j(document).ready(function(){
$j('.grit_1_3_1').hover(
    function(){$j('.grit_1_3_1_hover').fadeIn()}, 
    function(){$j('.grit_1_3_1_hover').fadeOut()}
);
});

这里是div的css：

.grit_1_3_1 {
color: #ffffff;
width: 33%;
float: left;
background: #bdbdbd;
vertical-align: center;
text-align: center;
height: 296px;
margin-bottom: 30px;
}
.grit_1_3_1_hover {
    color: #ffffff;
    position: absolute;
    width: 296px;
    display: none;

    float: left;
    background: #bdbdbd;
    vertical-align: center;
    text-align: center;
    height: 296px;
    margin-bottom: 30px;
}

3个预告片中的第一个应切换，但不会停止！

感谢您的帮助！

祝你好运

Answer 1

$j(document).ready(function() {
    $j('.grit_1_3_1').hover(function() {
        $j('.grit_1_3_1_hover').stop.fadeTo(1);
    }, function() {
        $j('.grit_1_3_1_hover').stop().fadeTo(0);
    });
});

编辑，

实际上，当鼠标悬停在.grit_1_3_1时，您的HTML / CSS也不正确，.grit_1_3_1_hover与.grit_1_3_1完全重叠。因此，这意味着鼠标现在已经超出.grit_1_3_1并且它会淡出。

我建议您在子级grit_1_3_1_hover和grit_content创建2个div，然后将代码修改为

，而不是显示/隐藏grit_content_hover

$j(document).ready(function() {
    $j('.grit_1_3_1').hover(function() {
        $j('.grit_content_hover', $(this)).stop.fadeTo(1);
    }, function() {
        $j('.grit_content_hover', $(this)).stop.fadeTo(0);
    });
});

Answer 2

当你.fadeIn() _hover div时，它会替换屏幕上的原始<div>，这会导致鼠标离开<div>，从而触发.hover()的第二部分{1}}致电。

而不是交换div，只是交换那些div的文本内容可能更简单。

或者，在两个交替的div之上使用absolute定位<div>叠加层。让 div处理hover操作，但随后通过它显示下面所需的div。

jQuery淡出Toggle不会停止切换

2 个答案:

编辑，