如何在 CSS 中保持懸停元素的不透明度，同時減少其他元素的不透明度？

在懸停元素之外的元素上實現可變不透明度

您有一個元素集合，例如

標籤，並且您希望在懸停父元素時降低所有標籤的不透明度。但是，您希望直接懸停的元素的不透明度保持不變。

這可以使用 CSS 來完成。透過將懸停樣式套用於父元素並將其還原為懸停元素，您可以實現所需的效果：

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

此技術的工作原理如下：

• 當父元素
  元素懸停時，所有
  • 其中的元素的不透明度將降低至0.5。
  • 當您將滑鼠停留在特定的
  • 上時元素，
    的懸停樣式應用，將不透明度降低至 0.5。然而，懸停的
    • 的懸停樣式是將不透明度重設為 1。

    這會產生所需的效果，其中所有

  • 除了懸停的元素之外的元素的不透明度都會降低，而懸停的元素不受影響。

    範例

    以下是一個簡單的HTML 和CSS 範例來示範這項技術：

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

    li {
      float: left;
      width: 33.33%;
      line-height: 50px;
      background: grey;
      list-style-type: none;
    }
    ul:hover li {
      opacity: 0.5;
    }
    ul li:hover {
      opacity: 1;
    }

    注意：此技術可用於基於懸停互動或其他事件在不同元素上實現各種不透明效果。

以上是如何在 CSS 中保持懸停元素的不透明度，同時減少其他元素的不透明度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！