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

你的代码说你需要将兄弟姐妹盘旋以淡入它们。正确的逻辑是对你的a上的鼠标悬停做出反应并选择兄弟姐妹。 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来选择hovered元素的先前兄弟节点。 JSFiddle with JQuery的另一个版本。

Answer 2

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

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

    & a:hover {
      opacity: 1.0;
    }
  }

用于演示的html＆amp; css片段或fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你可能需要使用javascript / jQuery，因为CSS不能选择以前的兄弟姐妹，只能跟随兄弟姐妹。这真是太无聊了。

但是随着你拥有的东西，下一个兄弟姐妹没有点亮，因为a a：hover应该是：hover~a，这是“当我将鼠标悬停在a上时，选择它的兄弟姐妹。”

当我将鼠标悬停在元素上时显示兄弟姐妹

3 个答案: