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