CSS实现鼠标悬停某元素时修改另一元素的样式属性

嘿，我懂你的需求——想让鼠标悬停在#_nav li上时，把#drop的颜色改成蓝色对吧？先看看你当前代码的问题：

你用了相邻兄弟选择器+，这个选择器的规则是只能选中紧挨着目标元素的下一个同级元素。也就是说，只有当#drop是你 hover 的那个li的直接下一个兄弟元素时（比如HTML结构是<li>菜单</li><div id="drop">...</div>），这段CSS才会生效。但多数情况下，#drop的位置可能不符合这个要求，所以样式没变化。

下面根据不同的HTML结构，给你几个可行的方案：

方案1：如果#drop是#_nav的同级元素（在#_nav之后） #

用通用兄弟选择器~，它能选中目标元素之后所有的同级元素，不管中间有没有其他元素：

#_nav li {
  display: inline;
  text-decoration: none;
  padding-top: 5vh;
  line-height: 8vh;
  margin-right: 5vh;
  cursor: pointer;
}
/* 当#_nav下的任意li被hover时，选中后面的#drop */
#_nav:hover ~ #drop {
  color: blue;
}
#drop {
  color: red;
}

对应的HTML结构示例：

<nav id="_nav">
  <li>首页</li>
  <li>产品</li>
  <li>关于我们</li>
</nav>
<div id="drop">这是下拉内容</div>

方案2：如果#drop是li的子元素（比如下拉菜单嵌套在li里） #

直接用后代选择器，选中hover状态下li内部的#drop：

#_nav li {
  display: inline;
  text-decoration: none;
  padding-top: 5vh;
  line-height: 8vh;
  margin-right: 5vh;
  cursor: pointer;
  position: relative; /* 如果是下拉菜单，需要这个来定位子元素 */
}
#_nav li:hover #drop {
  color: blue;
}
#drop {
  color: red;
  position: absolute;
  top: 100%;
  left: 0;
}

对应的HTML结构示例：

<nav id="_nav">
  <li>
    产品
    <div id="drop">产品列表...</div>
  </li>
</nav>

方案3：如果#drop和li完全没有层级/兄弟关系（跨结构） #

这种情况CSS就无能为力了，得用JavaScript来实现：

// 获取所有nav下的li元素
const navItems = document.querySelectorAll('#_nav li');
// 获取drop元素
const dropElement = document.getElementById('drop');

// 给每个li添加鼠标移入事件
navItems.forEach(item => {
  item.addEventListener('mouseover', () => {
    dropElement.style.color = 'blue';
  });
  // 鼠标移出时恢复原颜色
  item.addEventListener('mouseout', () => {
    dropElement.style.color = 'red';
  });
});

你可以根据自己实际的HTML结构，选择对应的方案来调整代码哦～

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