个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在使用 Tristen Brown 的 hoverintent library ，它是 jQuery 的纯 Javascript 版本 hoverIntent图书馆。
我有两个元素 first 和 second。
second 元素有 hoverintent 处理程序，它会导致工具提示出现在该元素上方。当我手动将鼠标悬停在 second 上时，工具提示会按预期显示。
我想以编程方式触发second 的工具提示。例如，要与 first 元素进行交互，会导致显示 second 元素的工具提示。我尝试使用 jQuery trigger 来做到这一点。我能够触发鼠标悬停处理程序，但不能触发任何 hoverIntent。
有什么建议吗？
这是我的 Javascript:
$( document ).ready(function() {
var first = document.getElementById('first');
var second = document.getElementById('second');
$(first).mouseover(function(){
$(second).trigger({ type:"mouseover", clientX:"350", clientY:"105" });
$(second).trigger({ type:"mousemove", clientX:"350", clientY:"105" });
});
hoverintent(second, function(e) {
this.className = 'on';
}, function(e) {
this.className = 'off';
});
$(second).mouseover(function(){
console.log("mouseover");
});
});
这是我的 HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src='http://tristen.ca/hoverintent/dist/hoverintent.min.js'></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div style="padding:100px;">
<ul class='examples'>
<li id='first'>
Trigger
</li>
<li id='second'>
hoverintent
<span class='popup'>Hi there</span>
</li>
</ul>
</div>
</body>
</html>
完整的 JS bin 在这里:
最佳答案
I would like to trigger the tooltip of second by mousing over the first element.
您可以将一系列鼠标事件分派(dispatch)到#second 并保持hoverintent 代码和分派(dispatch)代码完全分开，如下所示:
// Hoverintent code
$(document).ready(function() {
var second = document.getElementById('second');
hoverintent(second, function(e) {
this.className = 'on';
}, function(e) {
this.className = 'off';
});
});
///////////////////////////////////
// Dispatch code
$(document).ready(function() {
var first = document.getElementById('first');
var second = document.getElementById('second');
$(first).on("mouseover", function(){
// Send a mouseover to wake hoverintent
var event = new MouseEvent("mouseover");
second.dispatchEvent(event);
// Send a mousemove trigger the internal hover code
event = new MouseEvent("mousemove");
second.dispatchEvent(event);
});
$(first).on("mouseout", function(){
// Cancel the hover code
var event = new MouseEvent("mouseout");
second.dispatchEvent(event);
});
});
关于javascript - 如何以编程方式在元素上触发 "hoverintent"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30589309/
24
4
0
我正在使用 Tristen Brown 的 hoverintent library ，它是 jQuery 的纯 Javascript 版本 hoverIntent图书馆。 我有两个元素 first 和
我目前正在进行的项目显示了许多正在参加事件的人的照片，我希望发生一个显示他们名字的悬停事件。我已经让它工作了，但它也会导致图像在这样做时变得不对齐。这是代码... JS $(document).rea
好吧，我正在尝试使用hoverIntent为一些社交网络图标设置动画，我在页面的其他部分使用了hoverIntent，并且效果很好。我没有收到错误消息，只是什么都没有发生!
我有以下 hoverIntent 函数 $(".samplePepleCon").hover(function() { var getId = $(th
我需要将上下文传递给我对 showPictureZoom 的调用(事件结束)。有谁知道该怎么做？我的想法是我需要传递一个存储在 dom 中的变量(图像 src)，我不知道我该怎么做...... 这是我
我多次使用 jQuery 和 hoverIntent 插件，下拉菜单和高级导航应该更优雅一些。但是我遇到了一个问题。 我有一个带有可点击 li 元素的菜单，该元素也有悬停。 如果有人在 intent
我有一个脚本可以在鼠标悬停时为我的菜单 ul 元素设置动画。它还为 ul 创建了一个背景元素。我制作了这个脚本: jQuery(document).ready(function($) { $(
嗨，这是非常基本的 jQuery 内容，但我有点迷路了。所以我有一个 310px 的图像，大部分隐藏在页面中，例如: .bottom-panel { position: fixed;
我是 jQuery 的新手，想将 hoverIntent 插件添加到我的站点作为我的导航菜单。我被提到了 Brian Cherne 的 site并查看要下载的代码，但我不太确定如何将它们组合在一起才能
我使用Drupal Views、ajax 和hoverIntent 插件的组合来显示内容。问题是，在 ajax 请求之后，“hoverIntent”事件不再绑定(bind)到我的选择器(在本例中为 V
我不想在我的所有页面中都包含 jquery，但我在悬停某个部分时添加了一个全局“弹出”菜单，但我不希望它立即出现，因为移动鼠标时它很烦人.通常我会使用 jquery 和 hoverintent 来执行
我已经实现了以下插件: jQuery.event.special.hoverintent = { pxDelta: 7, pxRate: 100, bindType: "mo
我在这个网站上遇到了一个奇怪的问题 http://bit.ly/MJ8KT6它利用了 HoverIntent 和 Superfish 菜单解决方案。我在网站顶部的主子菜单上运行了 0.2 秒的延迟，以
我正在尝试使用 hoverIntent 显示内容无需为每个 id 编写特定条件。我想在设置中将 id 传递给鼠标，这样我就可以通过向 id + '-x' 添加字符来显示所选内容。 我已经尝试了几种方法
我在使用 jQuery.hoverIntent 实现的 JS 子菜单中看到一些奇怪的闪烁在 this page here .闪烁只发生在页面下方的图像上，被 Chrome 和 Firefox 中出现的
我正在修改几个月前提出的一个问题的一些代码，但我一直受阻。最重要的是，我将鼠标悬停在 anchor 上，这意味着淡入相应的 div 并将“突出显示”类应用于 anchor 。我可以使用基本 JQuer
首先我深表歉意......我之前已经发布过这个问题，但我没有很好地解释它。我无法插入 hoverIntent到下面的 JavaScript 中...我需要它来替换下面的 mouseenter 和 mo
我有一个菜单栏，在上一行显示一组类别。 其中一个类别有一组子类别。 我有一个hoverIntent设置，以便它会在子菜单中向下滑动，并在鼠标离开时向上滑动。 但是，如果我正在查看此类别中的页面，我希望
我正在努力将hoverintent jQuery 集成到我的网站中。我已将其插入我的代码中，但我收到来自 Chrome 调试器的错误。错误显示为Uncaught TypeError:无法使用 in 运
根据this指导我尝试将 JQuery 加载到我的 Firefox 扩展程序。 var Myext = { loadJQuery: function(wnd) { var loader
我是一名优秀的程序员,十分优秀！