如何检测鼠标的下一个悬停
How do i detect the next hover for mouse?
嗨,我正在构建一个菜单,我需要检测鼠标的下一步动作。目前我正在使用event.relatedTarget
并获取下一个元素的event.relatedTarget.id
。它一直有效,直到我不得不在菜单上对我的 css 进行一些修改,所以我不得不摆脱overflow: hidden;
并使用display: inline-block;
。现在发生的事情是event.relatedTarget
是一个空字符串,除了当我快速将鼠标拉到我的菜单项时。我发布了部分代码,并在jsfiddle上拥有完整的内容。伙计们有什么想法吗?
链接到项目
Navigation.top_links.on('mouseleave', function (event) {
var sub_wrapper = $('.sub-wrapper'),
target_id = event.relatedTarget.id;
console.log(event.relatedTarget.id);
console.log(event.relatedTarget.id);
if (target_id == 'got_me_sections' || target_id == 'got_me_products' || target_id == 'ind_sections' || target_id == 'ind_products') {
console.log('mouse down to items');
return false;
}
sub_wrapper.removeClass('sections').removeClass('products');
sub_wrapper.hide();
});
它有很多html,所以它变得有点混乱,对不起。
<ul id="top_nav">
<li class="first"><a href="#" id="sections" class="nav-link">sections</a></li>
<li><a href="#" id="products" class="nav-link">products</a></li>
<li>
<div id="nav_cart">
<div class="gfx-div-cart"></div>
</div>
</li>
</ul>
<div id="sub_nav">
<div id="sub_sections" class="sub-wrapper">
<div id="got_me_sections" class="top-space">
<div id="ind_sections" class="indicator"></div>
</div>
<div class="nav-items-wrapper">
<div class="nav-items-breadcrumb">
<ul class="breadcrumb">
<li class="bc first">sections</li>
<li class="bc last"> </li>
</ul>
</div>
<div class="nav-items">
<ul class="nav-items-list">
<li><a href="#" class="nav-item">item.Name</a></li>
</ul>
</div>
</div>
</div>
</div>
我通过将 css 添加到<div id="sub_nav">...</div>
我用负margin-top: -4px;
将容器向上移动了一点
相关文章:
- 滚动到容器中的下一个元素-几乎到了
- 后焦点更改为IE 11中的地址栏,而不是转移到表单中的下一个控件
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- 使用ajax将数据从一个步骤发送到下一个步骤的3步表单
- AngularJS&JSON-从Previous&下一个对象
- 使用向下箭头键(与tab键一样)聚焦下一个输入
- 来自文档或下一个静态父级的事件委派
- angularjs移除焦点上的活动类并添加到下一个项目
- 禁用旋转木马中的下一个按钮和上一个按钮
- 当按下一个键时,请多次按下不同的键
- 正在加载下一个帖子
- 构建JS测试,警报窗口重复上一个Q,而不是问下一个Q
- jQuery鼠标滚动到下一个id
- 如何检测鼠标的下一个悬停
- 将鼠标悬停在元素上动画化下一个元素-如何删除内联JS
- 在鼠标滚轮上自动滚动到下一个锚点
- 用鼠标慢慢滚动到页面上的下一个锚
- 模拟一个鼠标下,点击,鼠标上的序列在Tampermonkey
- 停止下一个鼠标悬停事件的触发,直到内部函数完成
- 单击鼠标,通过将类名从一个元素传递到下一个元素来更改图像