Javascript 通过将鼠标悬停在另一个屏幕上触发：悬停事件

我有一个jQuery问题；我想通过将鼠标悬停在另一个元素上来触发元素上的

：hover

事件，控制台显示错误：

未捕获范围错误：超过最大调用堆栈大小

下面是我的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>

没有政变




杜邦时刻

---

有什么想法吗

不能在任何元素中触发鼠标悬停事件。您已经在hover函数中触发了mouseover，这就是为什么它会抛出

RangeError

要解决您的问题，您可以使用简单的css规则：

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

但看到这一点对我来说仍然没有意义。你只需申请：

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

---

触发鼠标悬停事件与在元素上的实际鼠标不同，它不会触发元素的状态

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

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

还要确保HTML结构在li元素作为

ol

的直接子元素时有效

ol li{列表样式类型：无；文本对齐：居中；}
.爱：飞翔.发心{
颜色：红色；
}

没有政变




杜邦时刻

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

更好的方法是，当父对象或子对象悬停时，单独使用CSS来实现这一点：

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

---

另外，请注意，您的HTML是无效的；只有

li

元素可以是

ol

的直接后代，因为您递归地触发了事件，所以您正面临这个问题。由于这个无限悬停函数一次又一次地调用。。因此，堆栈溢出

发生这种情况是因为.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);
    }
});

好吧，这有点棘手；我使用Css，正如你们中的许多人所说：

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

但是更改我的html，使其仅在我将鼠标悬停在文本或Fa心脏上时工作（因为您的所有答案使所有div都处于悬停状态）：



没有政变
杜邦时刻


谢谢你的帮助
 仅供参考，您的HTML无效-您只能将
li
元素作为
ol
的直接后代。悬停状态的样式是什么？这是类似的问题类型，如-检查此处-但您缺少引号。解决这个问题。按照上面提到的先纠正这个问题。。。仅供参考，您的HTML无效-您只能将li元素作为ol的直接后代Rory McCrossan 39分钟前控制台说：Uncaught RangeError:最大调用堆栈大小超过了StopperPagation（）的相同问题否，因为在这种情况下，它将触发父级上的css更改，我只希望触发。fa heart:悬停不是这样的。根据上述规则，只有
.fa heart
元素受到影响
<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>