如何保持鼠标悬停触发并仅在光标离开元素时停止操作?

亚历克斯

此代码将鼠标悬停事件侦听器添加到元素的父级:

const el = this.$refs.tooltip
el.parentElement.addEventListener('mouseover', () => {
  el.style.display = 'block'
  setTimeout(() => {
    el.style.display = 'none'
  }, 500)
})

但是,即使光标停留在父级上,工具提示也会消失。

如何保持工具提示显示并仅在光标离开元素的父元素时使其消失?

波尔图纳克
var parent = el.parentElement;
parent.addEventListener("mouseover",() => {el.style.display = 'block'});
parent.addEventListener("mouseout",() => {el.style.display = 'none'});

// 注意父 dom 结构,因为 mouseout 会从任何子节点触发

// 注意 ()=>{... this ...} 语法,因为不会将 'this' 绑定到 parent 而 function(ev){... this ...} 会

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

悬停在点击并离开元素时触发

来自分类Dev

如何停止d3.drag在Chrome中触发鼠标悬停/鼠标悬停事件

来自分类Dev

如何停止d3.drag在Chrome中触发鼠标悬停/鼠标悬停事件

来自分类Dev

将鼠标悬停在元素上时显示隐藏的div,并保持显示状态,直到鼠标离开任一元素

来自分类Dev

HWND鼠标悬停时更改光标

来自分类Dev

当<div>鼠标悬停操作时,更改<hr>元素。

来自分类Dev

Python Tkinter主窗口仍在主窗口内时绑定鼠标悬停/离开触发

来自分类Dev

将鼠标悬停在表格中的文本上时,如何停止将光标更改为I栏?

来自分类Dev

jQuery轮播滑块仅在悬停时循环并在鼠标离开时停止?

来自分类Dev

取消鼠标离开时的悬停操作

来自分类Dev

CSS - 鼠标悬停时动画触发

来自分类Dev

如何使用jQuery在鼠标悬停时找到当前元素?

来自分类Dev

如何在鼠标悬停时显示div元素?

来自分类Dev

如何在鼠标悬停时显示/隐藏元素?

来自分类Dev

如何在angularjs的鼠标悬停时定位当前元素?

来自分类Dev

鼠标悬停时停止横幅

来自分类Dev

将鼠标悬停在Raphael元素上时更改光标

来自分类Dev

仅当将鼠标悬停在按钮上时,元素才跟随光标

来自分类Dev

jQuery-仅在事件足够长时触发鼠标悬停

来自分类Dev

如何触发鼠标悬停信息

来自分类Dev

jQuery:将鼠标悬停在主元素上时如何悬停子元素的子元素

来自分类Dev

当鼠标离开C#中的组合框时,如何使组合框在鼠标悬停时自动展开并关闭?

来自分类Dev

鼠标悬停时开始悬停,鼠标悬停时停止

来自分类Dev

当鼠标悬停在悬停元素上时,如何设置悬停效果继续显示?

来自分类Dev

当鼠标悬停在悬停元素上时,如何设置悬停效果继续显示?

来自分类Dev

光标在OSX中的鼠标悬停时未更改

来自分类Dev

鼠标悬停时跟随光标的 Javascript 文本

来自分类Dev

当鼠标离开元素x值ms时隐藏元素

来自分类Dev

当指针位于 svg 图标的任何元素上时保持鼠标悬停效果

Related 相关文章

  1. 1

    悬停在点击并离开元素时触发

  2. 2

    如何停止d3.drag在Chrome中触发鼠标悬停/鼠标悬停事件

  3. 3

    如何停止d3.drag在Chrome中触发鼠标悬停/鼠标悬停事件

  4. 4

    将鼠标悬停在元素上时显示隐藏的div,并保持显示状态,直到鼠标离开任一元素

  5. 5

    HWND鼠标悬停时更改光标

  6. 6

    当<div>鼠标悬停操作时,更改<hr>元素。

  7. 7

    Python Tkinter主窗口仍在主窗口内时绑定鼠标悬停/离开触发

  8. 8

    将鼠标悬停在表格中的文本上时,如何停止将光标更改为I栏?

  9. 9

    jQuery轮播滑块仅在悬停时循环并在鼠标离开时停止?

  10. 10

    取消鼠标离开时的悬停操作

  11. 11

    CSS - 鼠标悬停时动画触发

  12. 12

    如何使用jQuery在鼠标悬停时找到当前元素?

  13. 13

    如何在鼠标悬停时显示div元素?

  14. 14

    如何在鼠标悬停时显示/隐藏元素?

  15. 15

    如何在angularjs的鼠标悬停时定位当前元素?

  16. 16

    鼠标悬停时停止横幅

  17. 17

    将鼠标悬停在Raphael元素上时更改光标

  18. 18

    仅当将鼠标悬停在按钮上时,元素才跟随光标

  19. 19

    jQuery-仅在事件足够长时触发鼠标悬停

  20. 20

    如何触发鼠标悬停信息

  21. 21

    jQuery:将鼠标悬停在主元素上时如何悬停子元素的子元素

  22. 22

    当鼠标离开C#中的组合框时,如何使组合框在鼠标悬停时自动展开并关闭?

  23. 23

    鼠标悬停时开始悬停,鼠标悬停时停止

  24. 24

    当鼠标悬停在悬停元素上时,如何设置悬停效果继续显示?

  25. 25

    当鼠标悬停在悬停元素上时,如何设置悬停效果继续显示?

  26. 26

    光标在OSX中的鼠标悬停时未更改

  27. 27

    鼠标悬停时跟随光标的 Javascript 文本

  28. 28

    当鼠标离开元素x值ms时隐藏元素

  29. 29

    当指针位于 svg 图标的任何元素上时保持鼠标悬停效果

热门标签

归档