当鼠标悬停在其他元素上时，如何触发:hover事件

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>

有什么想法吗？

- Nathan Schwarz

---

你的HTML无效 - 你只能将li元素作为ol的直接子元素。 - Rory McCrossan

悬停状态的样式是什么？ - dfsq

这是类似于以下问题的类型 - https://dev59.com/tmYr5IYBdhLWcg3w495- - Vinay

Answer 1

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

更好的做法是仅使用CSS来实现当父元素或子元素被悬停时的效果：

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

另外，请注意您的HTML语法不正确；只有li元素可以是ol的直接子元素。

- Rory McCrossan

---

不行，因为这样会触发父元素的CSS更改，而我只想触发.fa-heart:hover。 - Nathan Schwarz

那不是这种情况。根据上述规则，只有.fa-heart元素受到影响。 - Rory McCrossan

Answer 2

你不能触发任何元素的mouseover事件。而且你一直在hover函数内部触发mouseover，这就是为什么它会抛出RangeError的原因。

要解决这个问题，你可以使用简单的CSS规则：

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

但是，我仍然不明白这个。您可以尝试应用以下内容：

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

- Bhojendra Rauniyar

Answer 3

由于您在递归触发事件，导致无限悬停函数不断调用，从而导致堆栈溢出，因此出现了这种情况。

这是因为您的.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);
    }
});

- Vinay

---

请查看此处 - https://dev59.com/tmYr5IYBdhLWcg3w495- - Vinay

但你缺少引号。请修复。 - Bhojendra Rauniyar

提醒一下，你的HTML无效 - 你只能将li元素作为ol的直接后代。- Rory McCrossan 39分钟前 - Vinay

控制台显示：未捕获的范围错误：超出最大调用堆栈大小 - Nathan Schwarz

stopPropagation() 有同样的问题。 - Nathan Schwarz

Answer 4

触发mouseover事件并不等同于真正的鼠标悬停在元素上，它不会触发其: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>

- dfsq

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>

感谢您的帮助！

- Nathan Schwarz