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

回答

相关问题