將鼠標懸停在元素上時顯示同級

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上時，選擇其兄弟姐妹”。