Question

  <div id="parent">
    <div id="children">
    </div>
  </div>

And if we bind both parent and children with same events like :

     $("#parent").live({ mouseenter : Infocus , mouseleave : Outfocus });
     $("#children").live({ mouseenter : Infocus , mouseleave : Outfocus });

Now my problem is when i get my mouse over to the children the parent is also highlighted, Can anybody tell me whats going on here?

Answer 1

You’ve to use stopPropagation() for prevent event follow.

function Infocus(e) {
  e.stopPropagation();
  // your code
}

function Outfocus(e) {
  e.stopPropagation();
  // your code
}

Read about .stopPropagation()

You can do something like this: (may be not satisfactory)

$("#parent").live({
    mouseenter: Infocus,
    mouseleave: Outfocus
});
$("#children").live({
    mouseenter: Infocus,
    mouseleave: Outfocus
});

function Infocus(e) {
    if(this.id == 'parent') {
        $(this).css('background', 'yellow');
    } else if(this.id == 'children') {
        $(this).css('background', 'green');
        $(this).parent().trigger('mouseleave')
    }
}

function Outfocus(e) {
    if(this.id == 'parent') {
        $(this).css('background', 'transparent');
    } else if(this.id == 'children') {
        $(this).css('background', 'transparent');
        $(this).parent().trigger('mouseenter')
    }
}

DEMO