html - 当我将鼠标悬停在元素上时显示 sibling

Question

我有一个已分类的 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;
        }
    }
}

HTML 代码

<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>

Here's a link to the JSFiddle.

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

Answer 1

您的代码表示您需要将鼠标悬停在 sibling 上才能使其淡入。正确的逻辑是对将鼠标悬停在 a 上使用react并选择 sibling 。 Updated JSFiddle .

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

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

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

遗憾的是，您无法选择previous siblings这边走。一种可能的解决方法是使用一些 JavaScript 来选择悬停元素的前一个同级元素。另一个版本JSFiddle with JQuery .