如何让 CSS 悬停状态在鼠标移开后保持不变？

在悬停后维护 CSS 悬停状态

在网页设计中，悬停状态允许用户将鼠标悬停在页面上的元素上进行转换他们。但是，在某些情况下，即使在用户鼠标离开元素后，也希望悬停状态能够持续存在。

考虑以下代码片段：

#about {
  height: 25px;
  width: 84px;
  background-image: url('about.png');
  position: absolute;
  top: 200px;
  left: 0px;
}

#onabout {
  height: 200px;
  width: 940px;
  position: absolute;
  top: 60px;
  left: 0px;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 300;
  display: none;
}

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

此代码使用 :hover当鼠标悬停在另一个元素 (#about) 上时显示一个元素 (#onabout) 的伪类。然而，当用户将鼠标从#about 上移开时，#onabout 就会消失。

为了使悬停状态持续存在，CSS 提供了几个选项。一种方法是引入过渡属性：

#about {
  ...
  transition: 0.2s ease;
}

#about:hover #onabout {
  transition: 0.2s ease;
  opacity: 1;
}

此代码在将鼠标悬停在 #about 上并移开时添加平滑的过渡效果。还修改了 opacity 属性，以确保 #onabout 在鼠标离开 #about 后仍然可见。

另一种方法涉及使用 :active 伪类：

#about {
  ...
  cursor: pointer;
}

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

#about:active #onabout {
  opacity: 1;
  transition: 0.2s ease;
}

此代码添加了一个光标指示 #about 是可点击的，并使用 :active 在元素被点击时保持悬停状态。这种过渡确保了无缝的视觉体验。

最后，对于那些寻求更高级解决方案的人，CSS3 提供了animation-play-state 属性：

#onabout {
  display: block;
  animation-name: hover;
  animation-play-state: paused;
}

#about:hover #onabout {
  animation-play-state: running;
}

这段代码引入了一个带有@keyframes 悬停声明并默认暂停。当用户将鼠标悬停在 #about 上时，animation-play-state 将设置为正在运行，启动动画并即使在鼠标离开元素后也保持悬停状态。

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