Question

I want to bind to an element and add an outline to it when I over it. The problem is that when I hover over a nested element, the parent elements are also selected.

When I hover over “5 deep” I should only have a border around that span and not all of its parents.

http://jsfiddle.net/7uQwr/

How can I avoid this? Kind of an odd use case, but I dont have control over the markup here 🙂

Answer 1

It is happening because event is bubbled until the body element. Stop the event propagation using event.stopPropagation() then it will restrict only to the element on which the event is triggered.

Working demo