jQuery: trigger a hover event from another element(jQuery:从另一个元素触发悬停事件)
问题描述
当您将鼠标悬停在一个 <div>
上时,我希望页面的单独部分上的 <a>
也可以悬停"在其上.
<div class="initiator"></div><a class="receiver href="#">触摸 div 我会悬停!</a></div>我试过这个 jQuery,但它不会触发 <a>
的悬停 CSS.
$(".initiator").hover(function(){$(".receiver").hover();console.log("div 被悬停");});
解决方案 试试这个:
$('.initiator').on('mouseenter mouseleave', function(e) {$('.receiver').trigger(e.type);})
它将为接收者应用与发起者为 mouseenter 和 mouseleave 接收相同的触发器.请注意:
.hover(over, out)
只是以下的高级变体:
.on('mouseenter', over).on('mouseleave', out)
因此在绑定和触发鼠标事件时,使用这些信息可以更加精确.
如评论中所述,您还可以使用:
$('.initiator').hover(function(e) {$('.receiver').trigger(e.type);})
这里还有很多内容要阅读:http://api.jquery.com/hover/
When you hover over one <div>
, I want an <a>
on a separate part of the page to be "hovered" on also.
<div class="initiator">
</div>
<div>
<a class="receiver href="#">Touch the div and I get hovered!</a>
</div>
I've tried this jQuery, but it doesn't trigger the <a>
's hover CSS.
$(".initiator").hover(function(){
$(".receiver").hover();
console.log("div was hovered");
});
解决方案 Try this:
$('.initiator').on('mouseenter mouseleave', function(e) {
$('.receiver').trigger(e.type);
})
It will apply the same triggers for the receiver as the initiator receives for both mouseenter and mouseleave. Note that:
.hover(over, out)
is just a high-level variant of:
.on('mouseenter', over).on('mouseleave', out)
so using that information you can be more precise when binding and triggering mouse events.
As noted in the comment, you can also use:
$('.initiator').hover(function(e) {
$('.receiver').trigger(e.type);
})
There are lots more to read here: http://api.jquery.com/hover/
这篇关于jQuery:从另一个元素触发悬停事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:jQuery:从另一个元素触发悬停事件
基础教程推荐
- 响应更改 div 大小保持纵横比 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 动态更新多个选择框 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01