Search code examples
jquerymouseeventmouseenter

jquery mouseenter doesn't work on 'a' element, works fine on h3

I have (I believe)a very simple problem, but can't figure out what is wrong. the code will tell everything:

$(".all-products h3").mouseenter(function () {
    $(this).siblings('p').slideDown(200);
}).mouseleave(function () {
    $(this).siblings('p').slideUp(500);
});

and this is html:

<a title="xxx" href="#">
    <img src="1.jpg"/>
    <p>description</p>
    <h3>header3</h3>
</a>

This one works fine, but why doesn't it work when I replace in jquery the h3 with a, so it doesnt work this way below:

$(".all-products a").mouseenter(function () {
    $(this).siblings('p').slideDown(200);
}).mouseleave(function () {
    $(this).siblings('p').slideUp(500);
});
Solution

  • Cause you are using siblings.

    Try this:

    $(".all-products a").mouseenter(function(){
          $('p', this).slideDown(200);
           }).mouseleave(function() {
          $('p', this).slideUp(500);
        });