Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide. It works but the problem is that I have used div many times so I have used class for div definition. So when Mouse enter in one div other div also affected.

Code :

jQuery:

<script src=".10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#container").mouseenter(function(){
    $(":button").show();
  });
  $("#container").mouseleave(function(){
    $(":button").hide();
  });
});
</script>

jsp code :

   <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>

I have try to put Jquery on class="mainitemlist" but It's not working. So I have added in id="container". Anyone have idea, why it's not working ???

Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide. It works but the problem is that I have used div many times so I have used class for div definition. So when Mouse enter in one div other div also affected.

Code :

jQuery:

<script src="http://ajax.googleapis./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 code :

   <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>

I have try to put Jquery on class="mainitemlist" but It's not working. So I have added in id="container". Anyone have idea, why it's not working ???

• javascript
• jquery
• jsp

• it works in chrome, maybe i am missing something? Can you please add jsfiddle? – Adam Moszczyński Commented Oct 23, 2013 at 10:32

3 Answers 3

You can do this:

$(document).ready(function () {
    $(".mainitemlist").mouseenter(function () {
        $(this).find(":button").show();
    }).mouseleave(function () {
        $(this).find(":button").hide();
    });
});

Demo: Fiddle

When you used the class mainitemlist you were not using the function scope properly using $(this) and hence it showing all the button on mouseenter, since you used the code:

$(":button").show();

UPDATE

$(document).ready(function () {
    $(document).on('mouseenter', '.mainitemlist', function () {
        $(this).find(":button").show();
    }).on('mouseleave', '.mainitemlist', function () {
        $(this).find(":button").hide();
    });
});

try:

$(document).ready(function(){
  $("#container").mouseenter(function(){
    $("#container button").show();
  });
  $("#container").mouseleave(function(){
    $("#container button").hide();
  });
});

check out this fiddle.

b.t.w, you have 2 divs with the id of container. this is probably a mistake, and if not, it's bad practice.

hope that helps.

$("#container").mouseenter(function(){
    $(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
    $(this).find('#yourbutton').hide();
});