force jquery mouseover not to trigger when over children, just parent

Question

I have an <a> with a <img> inside, and I want something to happen when hovering over the <a> which works, the problem is that if I move the cursor over the image inside, it triggers again.

Is there a way to force it to trigger when over <a> only, and not the 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 to the ancestor elements, so you can use the mouseenter event which doesn't bubbles

Try the mouseenter event

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

Answer 2

You need to stop propagation/bubbling of events to the children

event.stoppropagation

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

or you can use the mouse enter event

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