隐藏当前div，并在具有相同类的多个div中显示另一个
隐藏当前div，并在具有相同类的多个div中显示另一个
提问于 2013-12-23 14:28:19
我有多个有相同类的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之上，它的行为就像它在不停地做鼠标切换和鼠标输出。
联署材料：
$('div.image-normal').hover(function() {
$(this).hide().siblings().show();
}, function() {
$(this).show().sibling().hide();
});Stack Overflow用户
回答已采纳
发布于 2013-12-23 14:34:42
您可以通过绑定在父.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;
}在原始代码中发生的事情是，当你将图像-正常地悬停时，它会隐藏起来，其他东西就会出现。但是，当图像正常隐藏自己时，它也会触发鼠标退出事件(因为它是隐藏的)，这就是为什么您会得到常量闪烁，因为它一直在悬停/不悬停。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20745528
复制相关文章
相似问题
腾讯云开发者
