嗨,我正在制作一种效果,即当鼠标在 div 中输入时,该 div 中会显示一个按钮,而当用户鼠标再次离开该区域时,按钮会隐藏。 它有效,但问题是我已经多次使用 div,所以我使用 class 来定义 div。 因此,当鼠标进入一个 div 时,其他 div 也会受到影响。
代码:
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").mouseenter(function(){
$(":button").show();
});
$("#container").mouseleave(function(){
$(":button").hide();
});
});
</script>
jsp代码:
<div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center"><a href="product?pid=3" style="color: #9caeb9;text-decoration: none;">Nokia Lumia 925</a></div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center"><a href="product?pid=5" style="color: #9caeb9;text-decoration: none;">HCL Me</a></div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>
我尝试将 Jquery 放在 class="mainitemlist"
上,但它不起作用。
所以我添加了id="container"
。
任何人都知道,为什么它不起作用???
最佳答案
你可以这样做:
$(document).ready(function () {
$(".mainitemlist").mouseenter(function () {
$(this).find(":button").show();
}).mouseleave(function () {
$(this).find(":button").hide();
});
});
演示:Fiddle
当您使用类 mainitemlist
时您没有使用 $(this)
正确使用函数作用域因此它显示 mouseenter
上的所有按钮,因为您使用了代码:
$(":button").show();
更新
$(document).ready(function () {
$(document).on('mouseenter', '.mainitemlist', function () {
$(this).find(":button").show();
}).on('mouseleave', '.mainitemlist', function () {
$(this).find(":button").hide();
});
});
关于javascript - JQuery 在 mouseenter 和 mouseleave 上无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19539080/