如何在鼠标离开元素后保持 CSS 悬停状态处于活动状态？

“取消悬停”后维护 CSS 悬停状态

在网页设计中，悬停状态通常用于在悬停时显示附加内容或效果在一个元素上。然而，当鼠标指针离开元素时，这种状态通常会消失。本文探讨了一种 CSS 解决方案，即使在“取消悬停”后也能保持悬停状态。

问题

许多初学者都会遇到保持悬停状态的挑战。例如，请考虑以下示例代码：

#about:hover #onabout {
  display: block;
}

将鼠标悬停在 #about 元素上时，#onabout 元素变得可见。但是，一旦悬停状态结束，它就会消失。

CSS 解决方案

幸运的是，CSS 提供了使用过渡延迟的解决方案。此属性指定应用 CSS 转换之前等待的时间。通过将其设置为非零值，我们可以在取消悬停后将悬停状态保持一段时间。

div img {
  transition: 0s 180s;
  opacity: 0;
}

div:hover img {
  opacity: 1;
  transition: 0s;
}

此代码确保图像（img）在取消悬停后 180 秒内保持可见。

替代方法

另一种CSS技术涉及使用变换和焦点淡入淡出

div:hover img:focus {
  transition: 3s;
  opacity: 0;
  transform: rotate(-360deg) scale(0.23);
}

此方法需要将 tabindex 添加到 中。

通过使用这些 CSS 技术，即使在取消悬停后也可以保持悬停状态，从而增强网页上的用户体验。

以上是如何在鼠标离开元素后保持 CSS 悬停状态处于活动状态？的详细内容。更多信息请关注PHP中文网其他相关文章！