Trigger a :hover event by hovering on an other

Question

I have a jQuery issue; I would like to trigger a :hover event on an element by hovering on an other, the console shows me an error:

Uncaught RangeError: Maximum call stack size exceeded

Here is my Javascript function :

$(".love").hover(function() { 
    $(".fa-heart").trigger('mouseover'); 
});

Here is my HTML :

                                   <div class="middle-bar grey-dark"></div>
                                        <ol class="container text-center" id="love-inline">
                                            <li>
                                                <h2 class="love inline" id="LOVE-left">Nos coups de</h2>
                                            </li> 
                                            &nbsp; 
                                            <li>
                                                <h2 class="love inline" id="heart"><i class="fa fa-heart hvr-pulse-grow"></i></h2>
                                            </li>
                                            &nbsp;
                                            <li>
                                                <h2 class="love inline" id="LOVE-right">du moment</h2>
                                            </li>
                                        </ol>
                                    <div class="little-middle-bar grey-dark"></div>
                                <div class="end-bar"></div>

Any idea ?

Answer 1

The error you see is because you are triggering a hover in a child element of the one which initially raised the event, causing a recursive loop.

A better idea is to use CSS alone to achieve this when either the parent or the child are hovered:

.love:hover .fa-heart, .fa-heart:hover {
    border: 2px solid #C00;
    /* style as needed ... */ 
}

Also, note that your HTML is invalid; only li elements can be direct descendants of ol.

Answer 2

You cannot trigger the mouseover event in any element. And you have been triggering mouseover inside hover function that's why its throwing RangeError.

To solve your issue, you can do it with simple css rules:

.love:hover .fa-heart:hover {
    color: red;
}

But seeing this still doesn't make sense to me. You may just apply:

.fa-heart:hover {
    color: red;
}