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