Question

我有多个具有相同类的div，它们是这样的：

            <div class="item even">
                <div class="image-normal">
                    <a title="VORTEILE" href=""><img width="120" height="141" border="0" alt="" src="uploads/pics/vorteile.png"></a>
                </div>
                <div class="image-hover">
                    <a title="VORTEILE" href=""><img width="120" height="141" border="0" alt="" src="uploads/pics/vorteile_hover.png"></a>
                </div>
                <div class="tooltip">
                    <span>VORTEILE</span>
                </div>
            </div>

最初还有一点css来隐藏2个div：

.two-columns-gravity-left .column-right div.image-hover {
    display: none;
}

.two-columns-gravity-left .column-right div.tooltip {
    display: none;
}

我希望当我将鼠标悬停在.image-normal以隐藏该特定div并在image-hover和.tooltip中显示/淡入淡出时，以及在鼠标输出时将其反转发生。

我尝试使用以下内容，但是当鼠标悬停在div上时，它继续闪烁（快速更改），它表现得像是在不断地进行鼠标悬停和鼠标移除。

JS：

$('div.image-normal').hover(function() {
    $(this).hide().siblings().show();
}, function() {
    $(this).show().sibling().hide();
});

Answer 1

您可以通过将hover绑定在父.item div

上来执行此操作

http://jsfiddle.net/HDv4q/

$('.item').hover(function() {
    $(this).addClass('current');
}, function() {
    $(this).removeClass('current');
});

然后用css隐藏/显示

.item.current div.image-normal {
    display: none;
}
.two-columns-gravity-left .column-right .item.current div.image-hover,
.two-columns-gravity-left .column-right .item.current div.tooltip {
    display: block;
}

原始代码中发生的情况是，当您悬停图像正常时，它会隐藏，其他内容会出现。但是当图像正常隐藏时，它也会触发mouseout事件（因为它被隐藏而未被发现），这就是为什么你不断闪烁因为它不断悬停/撤消

隐藏当前div并在具有相同类的多个div中显示另一个div

1 个答案: