如何在 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;
    }

    登入後複製

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