文本 div 在 mouseOver img 上显示和隐藏答案

【问题标题】：text div show and hide on mouseOver img文本 div 在 mouseOver img 上显示和隐藏
【发布时间】：2014-06-15 14:25:30
【问题描述】：

当mousOver 在img 上时，我使用jquery 代码来显示和隐藏文本div。它工作正常，但是当显示 div 时，当鼠标悬停在 div 上时，它会在鼠标悬停时隐藏并再次显示。我想要做的是在 mouseOver 图像时显示 div，当 mouseOver 在图像内和 div 不隐藏的文本 div 上时，我希望 div 仅在 img 中的 mouseOut 时隐藏。问题是我猜是因为我的 div 是 position:absolute，但我必须保留这个。

这是我的 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 以仅针对我鼠标悬停的图片？

希望你能理解我的问题，

感谢您的帮助

【问题讨论】：

标签： jquery css hover show-hide

【解决方案1】：

你不需要 jQuery。你可以用纯 CSS 做到这一点：

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

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

由于这使用了Adjacent sibling selector，因此无论页面上有多少“图像+div”组合，它都会始终选择相对于您当前悬停的图像的 DIV。

【讨论】：

【解决方案2】：

解决办法如下：

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

您必须添加“.cartouche”作为您悬停的元素，否则当您将鼠标悬停在它上面时会出现问题。

请看这里：http://jsfiddle.net/karl_wilhelm_telle/m7zFb/355/

或者您使用 Josh 的解决方案，这可能是更好的解决方案：而不是写：

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

写

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

这对未来更好。如果您在要显示的图片上添加额外的 div，例如.carouche2，则编码会容易得多。

【讨论】：

【解决方案3】：

我会将鼠标悬停动作基于容器：

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

【讨论】：

【解决方案4】：

试试这个

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

编码愉快！！

【讨论】：

【解决方案5】：

只需将您的元素 .cartouche 添加到选择器

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

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

【讨论】：