Html 将鼠标悬停在元素上时显示同级

我有一个已分类的

span

元素。当我将鼠标悬停在子元素上时，我希望兄弟元素全部淡入。我怎样才能做到这一点

SCSS代码

.move-tools {
    > a {
        opacity: 0.0;

        a ~ a:hover {
            opacity: 1.0;
            transition: opacity 0.5s ease-in-out;
        }

        &:hover {
            opacity: 1.0;
            transition: opacity 0.5s ease-in-out;
        }
    }
}

<div>
    <span class="move-tools">
        <a href title="Move to bottom">Move to bottom</a>
        <a href title="Move down one place">Move down</a>
        <a href title="Move up one place">Move up</a>
        <a href title="Move to top">Move to top</a>
    </span>
</div>

HTML代码

.move-tools {
    > a {
        opacity: 0.0;

        a ~ a:hover {
            opacity: 1.0;
            transition: opacity 0.5s ease-in-out;
        }

        &:hover {
            opacity: 1.0;
            transition: opacity 0.5s ease-in-out;
        }
    }
}

<div>
    <span class="move-tools">
        <a href title="Move to bottom">Move to bottom</a>
        <a href title="Move down one place">Move down</a>
        <a href title="Move up one place">Move up</a>
        <a href title="Move to top">Move to top</a>
    </span>
</div>

---

我试图使用

a~a

选择器来实现同级元素的不透明度，但我认为我误解了文档。

您的代码说需要悬停同级元素以使其淡入。正确的逻辑是将鼠标悬停在a上，然后选择兄弟姐妹

---

不幸的是，您不能选择这种方式。一种可能的解决方法是使用一些javascript来选择悬停元素的前几个同级。另一个版本的。

您可能需要使用javascript/jQuery，因为CSS不能选择以前的同级，只能选择后面的同级。这是一个令人沮丧的问题

---

但是，按照您所拥有的，下一个同级不会亮起，因为a~a:hover应该是a:hover~a，即“当我将鼠标悬停在a上时，请选择其同级。”

您可以在悬停跨距后为每个链接设置不透明度，然后在悬停链接时覆盖不透明度：

.move-tools:hover {
   a {
    opacity: 0.0;
      transition: opacity 0.5s ease-in-out;
    }

    & a:hover {
      opacity: 1.0;
    }
  }

用于演示或演示的html和css代码段

。移动工具：将鼠标悬停在{
不透明度：0.0；
过渡：不透明度0.5s缓进缓出；
}
.移动工具：悬停a:悬停{
不透明度：1.0；
}

回答得很好@Marvin！很高兴我能帮忙。请务必通知他人问题已解决。感谢所有回答问题的人。