jquery - 文本 div 在 mouseOver img 上显示和隐藏

Question

当鼠标悬停在 img 上时，我正在使用 jquery 代码显示和隐藏文本 div。它工作正常，但是当显示 div 时，当 mouseOver div 时，它会隐藏并在 mouseOver 时再次显示。我想要做的是在 mouseOver 图像时显示 div，当 mouseOver 在图像内部和 div 不隐藏的文本 div 上时，我希望 div 仅在 mouseOut 从 img 时隐藏。问题是我猜是因为我的 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 以仅定位我在 mouseOver 上的图片？

希望你能理解我的问题，

谢谢你的帮助

Answer 1

为此您不需要 jQuery。您可以使用纯 CSS 来完成:

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

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

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