如何在 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中文网其他相关文章！