javascript - JQuery が mouseenter と mouseleave で正しく動作しない

Question

こんにちは、マウスが div に入るときにその div に 1 つのボタンが表示され、ユーザーがその領域を離れるとボタンが非表示になるという効果を作成しています。それは機能しますが、問題はdivを何度も使用したため、div定義にクラスを使用したことです。そのため、マウスが 1 つの 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"。なぜそれが機能しないのですか？