Force jquery cursor not to run when above children, just parent

Question

I have <a>c <img>inside, and I want something to happen when you hover over <a>that which works, the problem is that if I move the cursor over the image inside, it starts up again.

Is there a way to make it run only when <a>, and not as a child (which is smaller than the parent).

my js:

$('#logo a').mouseover(function() {
        $(this).addClass('active');
        $('div#header-contact').fadeIn();
    });

Answer 1

The problem is mouseover event bubbles for ancestor elements, so you can use a mouseenter event that doesn't bubble

Try the mouseenter event

$('#logo a').mouseenter(function() {
    $(this).addClass('active');
    $('div#header-contact').fadeIn();
});

Answer 2

/

event.stoppropagation

$('#logo a').mouseover(function(event) {
        $(this).addClass('active');
        $('div#header-contact').fadeIn();
        event.stopPropagation()
    });

$('#logo a').mouseenter(function() {
    $(this).addClass('active');
    $('div#header-contact').fadeIn();
});

Answer 3

$('#logo a').mouseover(function() {
        $(this).addClass('active');
        $('div#header-contact').fadeIn();
});


$('#logo a img').mouseover(function(event) {
    event.preventDefault();
});

Answer 4

stop the mouseover event for a child:

$('#logo a').mouseover(function() {
        $(this).addClass('active');
        $('div#header-contact').fadeIn();
    }).children().mouseover(function() {
  return false;
});