javascript - JQuery Is not working properly on mouseenter and mouseleave - Stack Overflow

admin管理员组

文章数量:1026620

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

Share Improve this question Follow edited Oct 23, 2013 at 12:32 Vinoth Krishnan 2,94966 gold badges3030 silver badges3535 bronze badges asked Oct 23, 2013 at 10:25 Java Curious ღJava Curious ღ 3,70299 gold badges4242 silver badges6565 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

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

Share Improve this question Follow edited Oct 23, 2013 at 12:32 Vinoth Krishnan 2,94966 gold badges3030 silver badges3535 bronze badges asked Oct 23, 2013 at 10:25 Java Curious ღJava Curious ღ 3,70299 gold badges4242 silver badges6565 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

本文标签： javascriptJQuery Is not working properly on mouseenter and mouseleaveStack Overflow