如何在鼠标离开元素后保留 CSS 悬停状态？

在“取消悬停”后保留CSS悬停状态

在网页设计中，悬停状态通常用于在鼠标悬停时显示附加内容。不过，默认情况下，当鼠标光标离开指定区域时，该内容就会消失。本文介绍了一个 CSS 解决方案，用于在“取消悬停”光标后保持悬停状态可见。

提供的示例利用 ':hover' 伪类在将鼠标悬停在 div 上时显示图像。但是，当悬停事件结束时，图像会消失。为了解决这个问题，可以采用以下 CSS 技术：

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

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

div {
    line-height: 1.2em;
    font-size: 1em;
    color: black;
    transition: 0s 180s;
}

div:hover {
    line-height: 0;
    font-size: 0;
    color: transparent;
    transition: 0;
}

此代码结合使用绝对定位、不透明度和过渡来实现所需的效果。不透明度最初设置为 0，使图像不可见。悬停时，不透明度设置为 1，显示图像。为了防止内容在“悬停”时消失，使用过渡属性并延迟 180 秒（3 分钟）。这种延迟有效地抑制了不透明度过渡，使图像无限期地可见。

或者，也可以使用焦点事件来确保图像在单击时保持可见：

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

这变体使用焦点事件和转换来淡出并在单击图像后旋转图像，使其在转换过程中保持可见。

通过实现通过这些 CSS 技术，您可以修改悬停状态行为，以保持所需内容的可见性，即使在鼠标光标离开指定区域后也是如此。

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