Css: not() を使用してすべての兄弟を選択します

当社の UX チームは、ホバーされた項目を強調表示する代わりに、残りの項目を淡色表示にするナビゲーション メニューを作成することを私に求めていました。

CSS が役に立ちます!

CSS not() 擬似クラスを使用する場合、解決策は非常に簡単です。

HTML

<div class="menu-items">
  <div>Home</div>
  <div>About</div>
  <div>Contact</div>
  <div>Services</div>
  <div>Blog</div>
  <div>Portfolio</div>
</div>

SCSS

実際の機能に集中できるように、スタイル プロパティを削除しました。

1 .menu-items {    
2     visibility: hidden;
3 
4     & > * {
5         visibility: visible;
6         transition: opacity 500ms;
7     }
8 
9     &:hover > :not(:hover) {
10        opacity: 0.45;
11    }
12 }

.menu-items クラスを持つコンテナがあります。
4 行目では、すべての子要素を選択し、それらに不透明アニメーションのトランジションを追加しています。

9 行目は、not() 疑似クラスを使用してすべての ホバーされていない 要素の不透明度を低い値に設定することで、要素のホバー効果を処理します。

可視性プロパティでは何が起こっているのでしょうか?
.menu-items コンテナの可視性を非表示に設定してから、子要素を表示に戻します。これにより、要素間にマウスを移動するとエフェクトがオフになります。

以上です:)

以上がCss: not() を使用してすべての兄弟を選択しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。