我有以下 div html 代码。
<div class="container">
<div class="images">
<img src="<?php echo base_url();?>assets/images/products/<?php echo $product->image;?>" />
</div>
<div class="compareme"><h3>Compare Me</h3></div>
</div>
并遵循 CSS 和 jquery 代码:
.compareme{
position:absolute;
bottom:70px;
left: 110px;
height: 300px;
width:100%;
background:blue;
display:none;
text-align: center;
margin-left: 25px;
margin-right:30px;
font-size:12px;
}
$('.product-images').on('mouseover',function(){
$('.compareme').show();
});
问题是，当我悬停那个 .image div 时，所有 div 都会显示比较我的消息。 我真正想要的是，当我越过 .image div 时，当我从 .image div 中移除鼠标时，那个特定的 .compareme 应该出现并消失
所以，请帮忙解决这个问题
提前致谢
最佳答案
建议1(javascript):
您将需要“this”关键字 ( How does the "this" keyword work? )。
工作示例也在 https://jsfiddle.net/2dyxydLa/
$('.product-image')
.on('mouseenter', function(){
$(this).parent().next().show();
})
.on('mouseleave', function(){
$(this).parent().next().hide();
});.compareme{
position:absolute;
bottom:70px;
left: 110px;
height: 300px;
width:100%;
background:blue;
display:none;
text-align: center;
margin-left: 25px;
margin-right:30px;
color:white;
font-size:12px;
}<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="images">
<img src="http://lorempixel.com/400/200/" class="product-image" />
</div>
<div class="compareme"><h1>Compare Me</h1></div>
<div class="images">
<img src="http://lorempixel.com/400/200/" class="product-image" />
</div>
<div class="compareme"><h3>Compare Me</h3></div>
<div class="images">
<img src="http://lorempixel.com/400/200/" class="product-image" />
</div>
<div class="compareme"><h2>Compare Me</h2></div>
</div>
</body>
</html>建议2(css):
正如@super-xp 所建议的，您可以简单地使用 CSS:
.compareme {
display:none;
}
.container:hover .compareme {
display: inherit;
}<div class="container">
<div class="images">
<img src="http://lorempixel.com/400/200/" />
</div>
<div class="compareme"><h3>Compare Me</h3></div>
</div>
<div class="container">
<div class="images">
<img src="http://lorempixel.com/400/200/" />
</div>
<div class="compareme"><h3>Compare Me</h3></div>
</div>
<div class="container">
<div class="images">
<img src="http://lorempixel.com/400/200/" />
</div>
<div class="compareme"><h3>Compare Me</h3></div>
</div>关于jquery - 鼠标悬停时自动显示div，鼠标移开时自动显示div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29552204/