隱藏當前的股利和顯示其它具有相同類

多個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

隱藏當前的股利和顯示其它具有相同類

回答

相關問題