此代码将鼠标悬停事件侦听器添加到元素的父级:
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] 删除。
我来说两句