个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我有以下 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 应该出现并消失
所以，请帮忙解决这个问题
提前致谢
最佳答案
您将需要“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>正如@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/
27
4
0
在我的应用程序中，当 EditText 失去焦点时，我需要做一些事情。编辑 EditText 时，我不能让它失去焦点。在 Windows Phone 中有 this.Focus();方法，但在 and
我正在开发一个应用程序，该应用程序可以更精确地控制拖动对象的放置位置。但是对于电容式触摸屏，用户的手指总是会遮住放置目标。 Android 允许通过覆盖 View.DragShadowBuilder.
我是一名优秀的程序员,十分优秀！