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

Question

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

I hope I included all necessary information. I didn't find the rest of the code related with a problem. I believe the 'a' thing is wrong. Or maybe it can't be applied to a? no idea. A is set display:block; — Piotr Ciszewski, Feb 06 '13 at 00:19
everything is here at the mo: http://cabins.tucado.com/ all sorted now. Thanks for help. — Piotr Ciszewski, Feb 06 '13 at 00:34

score 2 · Answer 1 · answered Feb 06 '13 at 00:23

2

a is not a sibling of p, it is the parent of p. Try using .children('p') or .find('p') instead (the former is more specific).

answered Feb 06 '13 at 00:23

Explosion Pills

188,624
52
326
405

score 1 · Answer 2 · answered Feb 06 '13 at 00:23

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

Siblings of a would exist at the same level in the DOM. In your case you want to .find() the elements or call children(). either way.

score 1 · Accepted Answer · answered Feb 06 '13 at 00:23

1

Cause you are using siblings.

Try this:

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

answered Feb 06 '13 at 00:23

rkrdo

196
8

score 1 · Answer 4 · answered Feb 06 '13 at 00:24

1

Well it would seem the major problem is that that p element is not sibling to the a. You would need to replace siblings() with children()

answered Feb 06 '13 at 00:24

Mike Brant

70,514
10
99
103

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

4 Answers4