隐藏当前的股利和显示其它具有相同类

多个div中我有相同的类多个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中显示/淡出，并在mouseout上发生相反情况。

我尝试过以下方法，但它在鼠标悬停在div上时一直闪烁（快速更改），它的行为就像它一直在做mouseover和mouseout。

JS：

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

来源

2013-12-23 Olivera Kovacevic

当你隐藏DIV时，同样DIV –

你可以添加一个类到父级（.item）悬停和使用css的隐藏/显示 – Huangism

@狼，所以如何解决这个问题？黄色 - 举例？ –

为此，您可以通过父.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; 
}

w在原始代码中出现的帽子就是当你将图片悬停在正常位置时，它隐藏起来，其他东西出现。但是当图像正常隐藏时，它也会触发mouseout事件（因为它被隐藏而未被隐藏），这就是为什么你会不断闪烁，因为它不断悬停/不停止

来源

2013-12-23 14:34:42 Huangism

这很好，但随着我在div上移动鼠标，它不断变化。它应该保持直到mouseout。 –

我刚更新了答案，我把悬停绑定在错误的项目上 – Huangism

隐藏当前的股利和显示其它具有相同类

回答

相关问题