操纵非悬停元素的不透明度
在 HTML 标记中,您可以动态调整所有列表项 (LI) 的不透明度,除了当前悬停的那个。这种技术会产生一种效果,即未悬停的元素变得微妙透明,而悬停的项目仍然完全可见。
要实现此目的,可以利用 CSS:
ul:hover li { opacity: 0.5; } ul li:hover { opacity: 1; }
在此代码片段中:
HTML 示例:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
CSS样式:
ul { list-style-type: none; display: flex; justify-content: center; margin: 0; padding: 0; } li { width: 100px; height: 100px; background-color: gray; margin-right: 10px; opacity: 1; transition: opacity 0.2s ease-in-out; } ul:hover li { opacity: 0.5; } ul li:hover { opacity: 1; }
结果:
当您将鼠标悬停在 LI 上时,其不透明度将保持为 1,而所有其他 LI 将变为半透明度透明的。这为当前活动元素提供了视觉提示。
以上是如何使用 CSS 使非悬停列表项半透明?的详细内容。更多信息请关注PHP中文网其他相关文章!