鼠标悬停在图片上时，文本区域的显示和隐藏

Question

我正在使用jQuery代码来在鼠标悬停在图像上时显示和隐藏文本div。它能很好地工作，但当div被显示时，当鼠标悬停在div上时，它会隐藏，并且当再次悬停在div上时又会显示出来。我想要的是当鼠标悬停在图像上时显示该div，当鼠标悬停在图像内部并且悬停在文本div上时，div不会隐藏，只有当鼠标从图像上移开时才隐藏该div。我认为问题可能是因为我的div位置是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 来仅选中鼠标悬停的图片？

希望您能理解我的问题，感谢您的帮助。

- mmdwc

Answer 1

您不需要使用jQuery来完成此操作。您可以使用纯CSS实现：

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

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

由于使用了相邻兄弟选择器，它将始终选择与您当前悬停的图像相关的DIV，无论页面上有多少个“image+div”组合。

- Yuriy Galanter

Answer 2

只需将你的元素 .cartouche 添加到选择器中即可

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

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

- honk31

Answer 3

我会将鼠标悬停操作基于容器执行：

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

- Josh

Answer 4

这里是解决方案：

$(".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，编程将变得更加容易。

- Bluedayz

Answer 5

试一试

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

编码愉快！

- Deepak Goswami