text div顯示和隱藏在mouseOver img

我正在使用jquery代碼來顯示和隱藏文本div當mousOver在img上。它工作正常，但是當顯示div時，當mouseOver div時，它隱藏並在mouseOver時再次顯示它。我想要做的是顯示div時mouseOver圖像，當mouseOver內部圖像和文本div div不隱藏時，我希望div只有當從img的mouseOut隱藏。問題是我猜，因爲我的div是與位置：絕對，但我必須保持這一點。text div顯示和隱藏在mouseOver img

這裏是我的jQuery：

$(".image_big").hover(function(){ 
    $('.cartouche').show(); 
},function(){ 
    $('.cartouche').hide(); 
});

和我的CSS：

.cartouche {display:none;position: absolute; 
bottom: 0px; 
background-color: #00B252; 
color: white; 
text-transform: uppercase; 
text-align: left;padding: 10px} 

.image_big_container{width:473px;height:330px;text-align: center;} 
#slideshow{margin-top: 20px;position:relative} 
#slideshow_big { margin-bottom:10px}

這裏的jsfiddle看到它在行動：

http://jsfiddle.net/m7zFb/352/

我也將有很多圖片在我的網站上，並且只想從圖像中刪除文本div被選中，有沒有一種方法可以添加一個this.children只將目標放在圖像上我是mouseOver？

希望你明白我的問題，

感謝您的幫助

來源

2014-04-29 mmdwc

只是你的元素.cartouche添加到選擇

$(".image_big, .cartouche").hover(function(){ 
    $('.cartouche').show(); 
},function(){ 
    $('.cartouche').hide(); 
});

http://jsfiddle.net/honk1/m7zFb/353/

來源

2014-04-29 15:00:17 honk31

這裏是解決方案：

$(".image_big,.cartouche").hover(function(){ 
    $('.cartouche').show(); 
},function(){ 
    $('.cartouche').hide(); 
});

您必須將「.cartouche」添加爲鼠標懸停在其上的元素，否則在將鼠標懸停在其上時會出現問題。

在這裏看到：http://jsfiddle.net/karl_wilhelm_telle/m7zFb/355/

或者你用約什的解決方案，可能是更好的一個：不是寫作：

$(".image_big,.cartouche").hover(function(){

寫

$(".image_big_container").hover(function() {

這是更好未來。如果在要顯示的圖片上添加額外的div，例如.carouche2，則編碼會更容易。

來源

2014-04-29 15:00:38 Bluedayz

嘗試這個

$(".image_big,.cartouche").hover(function(){ 
    $('.cartouche').show(); 
},function(){ 
    $('.cartouche').hide(); 
});

編碼愉快！

來源

2014-04-29 15:00:49

我會立足容器上的mousover行動：

$(".image_big_container").hover(function(){ 
    $('.cartouche').show(); 
},function(){ 
    $('.cartouche').hide(); 
});

來源

2014-04-29 15:01:36 Josh

你不需要jQuery的這一點。你可以做到這一點在純CSS：

.image_big:hover + div.cartouche, div.cartouche:hover { 
    display:block 
}

演示：http://jsfiddle.net/m7zFb/356/

由於該使用Adjacent sibling selector它總是會選擇你目前徘徊在相對於圖像DIV，無論有多少「形象+ div「的組合。

來源

2014-04-29 15:03:46

text div顯示和隱藏在mouseOver img

回答

相關問題