hover到一个icon，content出现，再次hover到content上，content不消失

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的元素添加事件监听