0

在我的项目中，切换功能会切换多次。我认为这是因为绝对定位的 div 应该淡入淡出。我解决不了那个...

这里是 jQuery 代码：

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 个预告片中的第一个应该切换，但不会停止！

谢谢你的帮助！

最好的祝福

4

2 回答 2

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

编辑，

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

grit_1_3_1_hover我建议您在子级别创建 2 个 div，grit_content然后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);
    });
});​
于 2012-11-18T21:55:13.993 回答
0

当您.fadeIn()使用_hoverdiv 时，它会替换屏幕上的原始<div>内容，这会导致您的鼠标离开该 div，<div>从而触发调用的第二部分.hover()。

与交换 div 相比，只交换这些 div 的文本内容可能更简单。

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

于 2012-11-18T22:02:59.163 回答