鼠标悬停列表元素时div的Opacity未变化，求解决方案

你的代码存在两个核心问题：

1. CSS选择器匹配错误：HTML中目标列表项的class是otherlink，但CSS里写的是.link，导致hover选择器找不到对应元素。
2. 元素层级关系错误：.otherlinks是<ul>的兄弟元素，并非hover列表项的子元素，所以无法通过后代选择器直接控制。

下面提供三种可行的解决方式：

方式一：使用CSS :has()选择器（现代浏览器支持） #

利用:has()选择器检测列表项的hover状态，再通过相邻兄弟选择器控制.otherlinks：

修正后的CSS #

/* 确保.otherlinks的父容器是相对定位，避免绝对定位元素偏移 */
.header-container {
  position: relative;
}

.otherlinks {
  position: absolute;
  top: calc(100% + 1px);
  display: flex;
  z-index: 1;
  width: 100%;
  align-items: center;
  background-color: white;
  padding: 30px 15px;
  border-bottom: 5px solid var(--main-color);
  opacity: 0;
  transition: var(--main-transition);
  -webkit-transition: var(--main-transition);
  -moz-transition: var(--main-transition);
  -ms-transition: var(--main-transition);
  -o-transition: var(--main-transition);
}

/* 当.head-list内的.otherlink被hover时，控制相邻的.otherlinks */
.head-list:has(.otherlink:hover) + .otherlinks {
  opacity: 1;
}

对应的HTML（给ul添加父容器） #

<div class="header-container">
  <ul class="head-list">
    <li><a href="articles">articles</a></li>
    <li><a href="gallery">gallery</a></li>
    <li><a href="features">features</a></li>
    <li class="otherlink"><a href="other-links">other links</a></li>
  </ul>
  <div class="otherlinks">
    <div class="image">
      <img src="https://ps.w.org/ap-mega-menu/assets/icon-256x256.png" alt="megamenu">
    </div>
  </div>
</div>

方式二：调整HTML结构，将.otherlinks放入目标列表项内 #

把.otherlinks作为li.otherlink的子元素，这样后代选择器就能生效：

修正后的CSS #

/* 给li.otherlink设置相对定位，作为子元素绝对定位的参照 */
.head-list .otherlink {
  position: relative;
}

.otherlinks {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  display: flex;
  z-index: 1;
  width: 100%;
  align-items: center;
  background-color: white;
  padding: 30px 15px;
  border-bottom: 5px solid var(--main-color);
  opacity: 0;
  transition: var(--main-transition);
  -webkit-transition: var(--main-transition);
  -moz-transition: var(--main-transition);
  -ms-transition: var(--main-transition);
  -o-transition: var(--main-transition);
}

/* 直接通过hover后代选择器控制 */
.head-list .otherlink:hover .otherlinks {
  opacity: 1;
}

对应的HTML #

<ul class="head-list">
  <li><a href="articles">articles</a></li>
  <li><a href="gallery">gallery</a></li>
  <li><a href="features">features</a></li>
  <li class="otherlink">
    <a href="other-links">other links</a>
    <!-- 将.otherlinks移入li内 -->
    <div class="otherlinks">
      <div class="image">
        <img src="https://ps.w.org/ap-mega-menu/assets/icon-256x256.png" alt="megamenu">
      </div>
    </div>
  </li>
</ul>

方式三：使用JavaScript实现（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器，可以用JS监听鼠标事件：

JavaScript代码 #

const otherLinkItem = document.querySelector('.head-list .otherlink');
const otherLinksDiv = document.querySelector('.otherlinks');

otherLinkItem.addEventListener('mouseover', () => {
  otherLinksDiv.style.opacity = '1';
});

otherLinkItem.addEventListener('mouseout', () => {
  otherLinksDiv.style.opacity = '0';
});

原CSS和HTML无需修改（仅需确保选择器能正确找到元素） #

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