为什么当使用position: fixed;时，.nav-wrap ul:hover会失效？

当你给导航栏元素`.nav-wrap ul`应用CSS样式`position: fixed;`时，它通常会被定位在其相对于浏览器窗口的位置上，而不是页面流中正常元素的位置。这意味着当你鼠标悬停在这个已经固定位置的导航列表上时，正常的`hover`效果（即默认的背景色变化或其他过渡效果）可能会因为预期的行为改变而失效。

这是因为`hover`效果依赖于元素相对于文档的动态位置，而固定定位的元素不再响应基于相对或绝对定位的祖先元素的交互。解决这个问题的一种常见方法是在固定定位的元素外面添加一个新的`div`或`:after`伪元素，并为其设置一个可交互的区域，以模拟 hover 效果。例如：

.nav-wrap {
  position: relative;
}

.nav-wrap::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* 确保 hover 作用在其上方 */
}

.nav-wrap ul:hover {
  /* 在这里设置 hover 效果 */
}

这样，当用户移动鼠标时，`.nav-wrap ul`的 hover 效果仍然可以正常工作。