html
<div class="icon"></div>
<div class="content"></div>
css
.icon {
width: 30px;
height: 30px;
border: 1px solid red;
}
.content {
width: 400px;
height: 400px;
border: 1px solid red;
margin-top: 5px;
display: none;
}
js
// 知识点:如果一个dom元素消失了,那么是无法为其绑定事件的
var icon = document.querySelector('.icon')
var content = document.querySelector('.content')
var timeoutId = null
// 鼠标hover上icon,content出现
icon.addEventListener('mouseenter', (event) => {
content.style.display = 'block'
}, false)
icon.addEventListener('mouseleave', (event) => {
//不能立即消失,因为,如果鼠标再次hover到content,需要将content再次显示出来,可是这个时候content已经消失了,无法为其绑定上mouseenter事件
timeoutId = setTimeout(() => {
content.style.display = 'none'
}, 500)
}, false)
content.addEventListener('mouseenter', (event) => {
if (timeoutId) {
clearTimeout(timeoutId)
}
}, false)
content.addEventListener('mouseleave', (event) => {
setTimeout(() => {
content.style.display = 'none'
}, 500)
}, false)
效果演示
知识点:
1.为icon和content分别监听mouseenter和mouseleave事件。如果鼠标从icon出来后又进入content,则取消icon的mouseenter事件,即不让content消失。
2.无法为一个display=none的元素添加事件监听