如何使用 CSS 調暗除我懸停的元素之外的所有元素？-css教學-PHP中文網

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

Mary-Kate Olsen

發布： 2024-12-23 04:55:14

原創

173 人瀏覽過

How Can I Dim All Elements Except the One I Hover Over Using CSS?

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

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

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

ul:hover li {
  opacity: 0.5;
}

登入後複製

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