如何实现永久保留状态的CSS悬停效果

这个技巧的核心是利用超长的transition过渡时长（比如9999秒），当元素的悬停状态结束后，需要极长的时间才能恢复到初始状态，从而达到悬停效果"永久保留"的视觉效果。这种方法常被用于制作纯CSS对话框，使其保持打开状态。

实现代码示例 #

HTML代码：

<div>
  something here
</div>

CSS代码：

div { 
  width: 100px; 
  height: 100px; 
  transition: all 9999s; 
}

div:hover { 
  height: 300px; 
}

说明：给元素设置transition: all 9999s后，当鼠标移开，元素从悬停状态恢复初始状态的过渡会持续9999秒，在实际使用场景中几乎等同于永久保持悬停后的样式。

内容的提问来源于stack exchange，提问作者Patoshi パトシ