Change CSS on mouse enter vs mouseover using jQuery
mouseenter/mouseleave:
does not bubble (event triggered by a nested element is not sent to the element's parents
event is not sent when moving from child to parent
mouseover/mouseout:
does bubble (event is sent to parents)
you can stop this propagation by calling
event.stopPropagation()
for more information, see
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
div #d1 (uses mouseenter)
This is a div
This is a paragraph inside the div
This is an unordered list outside the div:
List item 1
List item 2 with a
bold
element
List item 3
div #d2 (mouseover)
This is a div
This is a paragraph inside the div
This is an unordered list outside the div:
List item 1
List item 2 with a
bold
element
List item 3
div #d3 (mouseover w/ stopPropagation)
This is a div
This is a paragraph inside the div
This is an unordered list outside the div:
List item 1
List item 2 with a
bold
element
List item 3