我正在使用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 来仅选中鼠标悬停的图片?
希望您能理解我的问题,感谢您的帮助。