通过将鼠标悬停在另一个上触发:悬停事件
Trigger a :hover event by hovering on an other
我有一个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>
<li>
<h2 class="love inline" id="heart"><i class="fa fa-heart hvr-pulse-grow"></i></h2>
</li>
<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>
知道吗?
您看到的错误是因为您在最初引发事件的子元素中触发了悬停,从而导致递归循环。
一个更好的想法是,当父对象或子对象悬停时,单独使用CSS来实现这一点:
.love:hover .fa-heart, .fa-heart:hover {
border: 2px solid #C00;
/* style as needed ... */
}
另外,请注意您的HTML是无效的;只有CCD_ 2元素可以是CCD_。
您不能在任何元素中触发mouseover事件。您一直在触发鼠标悬停功能,这就是它抛出RangeError
的原因。
为了解决您的问题,您可以使用简单的css规则:
.love:hover .fa-heart:hover {
color: red;
}
但看到这一点对我来说仍然没有意义。你可以申请:
.fa-heart:hover {
color: red;
}
由于递归触发事件,您将面临此问题。由于这个无限悬停函数一次又一次地调用。。因此堆栈溢出。
之所以会发生这种情况,是因为你的.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);
}
});
触发鼠标悬停事件与实际鼠标悬停元素不同,它不会触发元素的: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>
</li>
<li>
<h2 class="love inline" id="heart"><i class="fa fa-heart hvr-pulse-grow"></i></h2>
</li>
<li>
<h2 class="love inline" id="LOVE-right">du moment</h2>
</li>
</ol>
好的,所以这有点棘手;正如你们中的许多人所说,我使用了Css:
.fa-heart:hover, .love:hover .fa-heart {
// css changes
}
但是更改我的html,使其仅在我悬停在文本或Fa心脏上时工作(因为你的所有答案都使所有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>
<h2 class="love inline" id="heart"><i class="fa fa-heart"></i></h2>
<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>
谢谢你的帮助!
- 鼠标悬停事件影响列表中所有行中的按钮,而不仅仅是特定按钮
- 如何在asp:linkButton上显示鼠标悬停事件上的图像
- 当鼠标也在触摸另一个元素时,d3.js鼠标悬停事件未被触发
- Jquery 悬停事件卡在克隆元素上
- 鼠标悬停事件不会触发以触发 D3 中的单击事件
- 在悬停事件中创建一次性操作
- Kango 浏览器扩展开发中的鼠标悬停事件弹出窗口
- 覆盖对话框悬停事件
- Raphael悬停事件和调整大小框在第三次鼠标悬停后发生故障
- 定位将禁用悬停选择器和鼠标悬停事件
- 在余烬中传播悬停事件
- 创建随机图像交换并禁止鼠标悬停事件
- 每个元素有多个鼠标悬停事件
- 谷歌分析悬停事件跟踪
- 在每个条形图的中间添加文本标签&鼠标悬停事件
- 悬停事件上的删除按钮
- 使用单击和悬停事件在jquery中创建虚拟鼠标垫
- 无法让悬停事件使用 jQuery UI 持续时间参数或 CSS 处理目标元素的同级元素
- 正在停止对多个悬停事件的传播
- 禁用网页上的鼠标悬停事件