Question

我有一个jQuery问题;我希望通过悬停在另一个元素上触发元素上的:hover事件，控制台显示错误：

未捕获RangeError：超出最大调用堆栈大小

这是我的Javascript函数：

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

这是我的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>

有什么想法吗？

Answer 1

您看到的错误是因为您在最初引发事件的子元素中触发悬停，从而导致递归循环。

更好的想法是在父母或孩子被徘徊时单独使用CSS来实现这一目标：

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

另请注意，您的HTML无效;只有li元素可以是ol的直接后代。

Answer 2

您无法在任何元素中触发鼠标悬停事件。并且你一直在触发鼠标悬停功能，这就是为什么它会抛出RangeError。

要解决您的问题，您可以使用简单的css规则来执行此操作：

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

但看到这一点对我来说仍然没有意义。您可以申请：

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

Answer 3

由于您以递归方式触发事件，因此您将面临此问题。由于这种无限悬停功能一次又一次地调用..因此堆栈溢出。

这是因为你的.fa-heart类在.love类中，并且由于这是一个为父类调用的悬停事件。

您的问题的解决方案是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);
    }
});

Answer 4

触发鼠标悬停事件与元素上的真实鼠标不同，它不会触发:hovered状态。

无论如何，你不需要javascript，因为简单的CSS就足够了：

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

另外，请确保HTML结构对于li元素有效，作为ol的直接子元素。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

好的，这有点棘手;我使用了Css，就像你们许多人所说：

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

但是改变我的html，只有当我将鼠标悬停在文本或Fa-heart上时才能使其工作（因为你所有的答案都让所有的div都可以运行）：

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

感谢您的帮助！

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

5 个答案: