javascript - JQuery 在 mouseenter 和 mouseleave 上无法正常工作

Question

嗨，我正在制作一种效果，即当鼠标在 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"。任何人都知道，为什么它不起作用？？？

Answer 1

你可以这样做:

$(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();
    });
});