Handler for hovering over an element and all its children

Question

The handler must operate when you hover over an element with a class D1 and when you hover over all his children. How to do it? Tried through the cycle but confused.

<div class="d1">
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita inventore nobis cum itaque unde eos aliquam labore reiciendis iusto dolore ducimus tempore quidem et nisi debitis similique ea dignissimos ex.</p>
</div>

Link to the sandbox: Fiddle

Answer 1

You can use mouseenter and mouseleave instead of mouseover and mouseout . These have the functionality you need, provided you're targeting the supported browsers (see links above).

Here's a working jsFiddle from your code: http://jsfiddle.net/rgthree/rs6qm9v5/2/