CSS：使用 not() 選擇所有兄弟姊妹

我們的使用者體驗團隊希望我建立一個導航選單，使其餘項目變暗，而不是突出顯示懸停的項目。

CSS 來救援！

使用 CSS not() 偽類時，解決方案非常簡單：

超文本標記語言

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

南海社會安全局

我刪除了樣式屬性，以便我們可以專注於實際功能：

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中文網其他相關文章！