为何hover样式作用于错误元素？API动态生成DOM的样式异常排查

问题原因 #

你当前的CSS选择器.post:hover + .post .hidden使用了相邻兄弟选择器（+），它的作用是：当鼠标悬停在某个.post元素上时，选中它紧挨着的下一个同级.post元素里的.hidden，这就是为什么悬停当前.post时，下一个.post的.hidden会显示。

修复方案 #

核心CSS修正 #

只需要修改CSS选择器，去掉相邻兄弟选择器，直接选中hover状态下的.post内部的.hidden元素即可：

.post {
  border: 1px solid #000;
  margin-bottom: 15px;
}

.hidden {
  display: none;
}

/* 修正选择器：选中当前hover的.post下的.hidden */
.post:hover .hidden {
  display: block;
}

可选JS布局优化 #

你的JS代码里使用container.insertAdjacentHTML('afterend', ...)会把所有.post元素插入到container的外部（与container同级），如果你的意图是让.post作为container的子元素，建议将第二个参数改成'beforeend'，使结构更符合常规的容器-子元素布局：

const fetchData = async() => {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts')
    const data = await res.json()
    return data
  }
  (async() => {
    const container = document.querySelector('.container')
    const data = await fetchData()
    data.forEach(post => {
      container.insertAdjacentHTML(
        'beforeend', // 修改为该值，将post插入到container内部末尾
        `<div class="post">
            <p>${post.title}</p>
            <p class="hidden">hover</p>
          </div>`
      )
    })
  })()

修改后HTML结构会变为：

<div class="container">
  <div class="post">...</div>
  <div class="post">...</div>
  ...
</div>

内容的提问来源于stack exchange，提问作者Moataz Ghazy