Question

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

2015-07-03

3266

javascript jquery html css hover

我有一个 jQuery 问题；我想通过将鼠标悬停在另一个元素上来触发元素上的 :hover 事件，控制台显示错误：

Uncaught RangeError: Maximum call stack size exceeded

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

您无法在任何元素中触发 mouseover 事件。并且您一直在 hover 函数中触发 mouseover，这就是它抛出 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);
    }
});