通过将鼠标悬停在另一个上来触发a：悬停事件

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;
}

Answer 3

You are facing this due to you are recursively triggering the event. Due to this infinity hover function calling again and again .. and hence the stack got overflowed.

This happens because your .fa-heart class was inside the .love class and due to this an hover event called for the parent class.

solution for your problem is e.stopPropagation(); use this like ..

$('.love').hover(function(e) {
    $('.fa-heart').trigger(e.type);
    e.stopPropagation();

});

As the above code also not worked. I worked more on the code and find the correct solution. Please check the below code for the solution. If you still facing any problem then let me know.

$('.love').hover(function(e) {
    if(e.target !== this ) {
     return false;   
    } else {
        $('.fa-heart').trigger(e.type);
    }
});

Answer 4

Triggering mouseover event is not the same as real mouse over the element, it will not trigger :hovered state of it.

Anyway, you don't need javascript for this, as simple CSS would be enough:

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

Also make sure HTML structure is valid with li element as direct children of ol .

 ol li {list-style-type: none; text-align: center;} .love:hover .fa-heart { color: red; } 

 <link data-require="font-awesome@*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" /> <ol class="container text-center" id="love-inline"> <li> <h2 class="love inline" id="LOVE-left">Nos coups de</h2> &nbsp; </li> <li> <h2 class="love inline" id="heart"><i class="fa fa-heart hvr-pulse-grow"></i></h2> &nbsp; </li> <li> <h2 class="love inline" id="LOVE-right">du moment</h2> </li> </ol> 

Answer 5

Okay so it was a bit tricky; I used Css as many of you said as so :

.fa-heart:hover, .love:hover .fa-heart {
// css changes
}

but change my html as so to make it work only when I hover on the text or the Fa-heart (because all your answers made all the div hoverabled) :

<div class="middle-bar grey-dark"></div>
                                            <ol class="container text-center" id="love-inline">
                                                <li class="love inline">
                                                    <h2 class="love inline" id="LOVE-left">Nos coups de</h2>
                                                    &nbsp;<h2 class="love inline" id="heart"><i class="fa fa-heart"></i></h2>&nbsp;
                                                    <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>

Thanks for your help !