如何使用 CSS 調暗除我懸停的元素之外的所有元素？

降低除懸停元素之外的所有元素的不透明度

在CSS 中，您可以調整元素的不透明度來控制其透明度。若要達到降低懸停元素之外的所有元素的不透明度的效果，請按照下列步驟操作：

• 為所有元素設定較低的不透明度。 首先應用較低的不透明度值使用 opacity 屬性到目標容器內的所有元素。這將降低它們的可見性，同時使懸停的元素不受影響。例如：

ul:hover li {
  opacity: 0.5;
}

• 重設懸停元素的不透明度。 若要使懸停元素突出，請將其不透明度恢復為 1，這是其預設值價值。您可以使用以下方法實現此目的：

ul li:hover {
  opacity: 1;
}

注意：這些規則適用於觸發懸停效果的 ul 容器內的 li 元素。

範例：

考慮以下內容程式碼：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

ul:hover li {
  opacity: 0.5;
}
ul li:hover {
  opacity: 1;
}

將滑鼠停留在任何清單項目(

)上時，所有其他清單項目將褪色至50% 不透明度，而懸停的項目保留完全可見性。

以上是如何使用 CSS 調暗除我懸停的元素之外的所有元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！