Html 元素悬停以更改其他元素样式不起作用

问题描述

body {
  background: black;
}

.text-menu {
  font-size: 1.5em;
  transition: .5s;
  margin-bottom: 1rem;
  color: white;
}

.m-1:hover~.m-3 {
  opacity: .4;
  color: red;
}

.m-1:hover~.m-2 {
  opacity: .4;
  color: red;
}

.m-2:hover+.m-1 {
  opacity: .4;
  color: red;
}

.m-2:hover~.m-3 {
  opacity: .4;
  color: red;
}

.m-3:hover~.m-2 {
  opacity: .4;
  color: red;
}

.m-3:hover~.m-1 {
  opacity: .4;
  color: red;
}

<div class="text-menu m-1">Rreth nesh</div>
<div class="text-menu m-2">Shërbimet</div>
<div class="text-menu m-3">Na Kontaktoni</div>

我正在尝试设置一个带有创建链接的菜单，我希望当我悬停特定链接时，其他链接的不透明度为 0.6 变得不那么重要，并且焦点转到悬停项目。但我这样做有问题吗？

解决方法

从您在选择器中已经到达的任何给定点来看，没有向后或向上的方向，因此不幸的是，仅靠 CSS 无法实现您想要做的事情。

使用一点点 Javascript 很容易：

const menuContainer = document.querySelector('.menu-container');
const menuItems = menuContainer.querySelectorAll('.text-menu');

menuContainer.addEventListener('mouseover',f);
menuContainer.addEventListener('mouseleave',f);

function f(event) {
  for (const menuItem of menuItems) {
    menuItem.classList.toggle('inactive',event.target !== menuItem && event.target !== event.currentTarget)
  }
}

body {
  background: black;
}

.text-menu {
  font-size: 1.5em;
  transition: .5s;
  margin-bottom: 1rem;
  color: white;
}

.inactive {
  opacity: .4;
  color: red;
}

<div class="menu-container">
  <div class="text-menu">Rreth Nesh</div>
  <div class="text-menu">Shërbimet</div>
  <div class="text-menu">Na Kontaktoni</div>
</div>