Question

我正在使用jquery代码在img上的mousOver时显示和隐藏文本div。它工作正常，但是当显示div时，鼠标在div上，当mouseOver它时它隐藏并再次显示。我想做的是在mouseOver图像时显示div，当mouseOver在图像内部和div上没有隐藏的文本div时，我希望div只在img中的mouseOut时隐藏。问题是我猜，因为我的div是位置：绝对的，但我必须保留它。

这是我的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。

Answer 2

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

即可

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

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

Answer 3

我会将鼠标放在容器上的操作上：

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

Answer 4

以下是解决方案：

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

你必须添加＆＃34; .cartouche＆＃34;作为你悬停在上面的元素，否则当你将鼠标悬停在它上面时会出现问题。

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

或者你使用Josh的解决方案可能是更好的解决方案：而不是写作：

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

写

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

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

Answer 5

试一下

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

快乐编码!!

text div显示并隐藏在mouseOver img上

5 个答案: