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

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>

这是到JSFiddle的链接。

我试着用a ~ a选择，使通过同级元素的不透明度，但我想我误解的文件。

Answer 1

您的代码说您需要将兄弟姐妹悬停以使其淡入。正确的逻辑是对悬停在您的a和选择兄弟姐妹上的对象做出反应。 更新了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;
    }
  }
}

不幸的是，您不能以这种方式选择以前的兄弟姐妹 。 可能的解决方法是使用一些JavaScript选择悬浮元素的先前同级。 带有JQuery的JSFiddle的另一个版本。

Answer 2

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

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

    & a:hover {
      opacity: 1.0;
    }
  }

用于演示或提琴的 html＆css片段

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

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

Answer 3

您可能需要使用javascript / jQuery，因为CSS不能选择以前的兄弟姐妹，而只能选择后面的兄弟姐妹。 真是可惜

但是，按照现有的方式，下一个兄弟姐妹不会点亮，因为a〜a：hover应该是a：hover〜a，即“当我将鼠标悬停在a上时，选择其兄弟姐妹”。