Geek Answers Handbook

Trigger event a: hangs on another

I have a jQuery problem; I would like to trigger an event :hoverfor an element by hanging on another, the console shows me an error:

Uncaught RangeError: maximum call stack size

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?

+4
source share
5 answers

The error you see is that you are causing a hang in the child of the one that originally raised the event, triggering a recursive loop.

It is best to use CSS only to achieve this when the parent or child element hangs:

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

Also note that your HTML is not valid; only elements lican be direct descendants ol.

+5

mouseover . , RangeError.

, CSS:

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

. :

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

, :hovered.

javascript , CSS:

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

, HTML li 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>
0

- , . - .. , , .

, .fa-heart .love, - hover .

- e.stopPropagation(); ..

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

});

. . , . - , .

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

, . Css, :

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

but change my html as such so that it only works when I hover over text or Fa-heart (because all your answers made everything div-hung):

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

Thank you for your help!

0
source

More articles:


All Articles