javascript - 触发一个 :hover event by hovering on an other

Question

我有一个 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 的直接后代。