CSS transition 小技巧！如何保留 hover 的状态？

通常情况下，hover 是无法保存状态的。鼠标移入触发额外样式，一旦移出就还原了。,这就意味着，如果需要保留hover的状态，可能就不得不借助JS了，比如下面是[1]的首页排行榜效果。,,这里的主要交互有以下几个：,目前官网的实现也是通过JS实现的，事实上，仅仅通过 CSS也是可以完全做到的，需要用到transition延时的一些小技巧，一起看看吧！,所有的一切都离不开布局。,假设列表HTML是这样的。,简单修饰一下：,效果如下：,,现在加上hover的效果：,效果如下：,,很正常的hover效果，没什么特别的，那如何在移出后仍然保留最后的状态呢？接着往下看。,实现hover保留状态需要用到这样一个小技巧。,比如，给一个元素添加hover样式。,,如果我们给这个元素加一个延时。,那么，在鼠标移入和移出时都会有延迟。,,接着，我们在 hover的时候取消延时。,那么，在鼠标移入的时候会迅速响应，移出的时候仍然会有延迟。,,到这里相信大家都明白了吧，如果把延时设置为足够大，比如：,这样鼠标在移出后，需要经历9999s后才会变为原状，也就相当于保留了hover状态,,原理就是这样，接下来看看实际应用吧！,根据上面的原理，我们可以轻松的实现在hover后保留状态，如下：,需要注意的是，由于是transition，所以所有的状态变化都是需要支持过渡属性的，比如隐藏sumary这里用的是height: 0而不是display:none，还有选中的背景色变化，由于background-image不支持过渡，所以换成了::before，然后单独用opacity控制等等一些细节，效果如下：,,这样在鼠标离开后，之前状态仍然是保留的。但是我们只需要保留上一次的，而不是所有的，如何处理呢？,这里需要换一种思路，可以这么做，鼠标在移入整个列表的时候就清除所有的状态，这样就只有当前hover的选项才会保留下来，有点类似于JS中的思维，先把所有的.current都移除，再给当前项添加.current，实现如下,这样就实现了鼠标移出列表后仍然保留上一次的选中态的功能，有点像单选框的效果，只不过是hover触发的，效果如下：,,下面来实现最后一个功能。,这个相对而言比较容易，需要用到:first-child伪类，可以匹配到第一个元素。,不过需要考虑的是优先级的问题，这个是默认状态，权限应该是最低的，其他hover样式都应该可以覆盖它，所以可以放在最前面，如下：,这样就完美实现了文章开头的效果。,,由于是 CSS 实现，多个列表也是完全复用的。,,完整代码可以查看线上 demo：[2] 或者[3],以上就是通过纯 CSS 实现保留鼠标滑过样式的全部技巧了，主要还是对transition-delay的灵活运用，下面总结一下：,当然，整个实现对于 CSS 以及选择器要求是相当高的，实际项目过程中可能并不如 JS 实现来的快，但是，CSS能够实现的又何必动用 JS呢？在我看来，JS就应该回归本职，专心处理数据逻辑交互，视觉方面全部交给CSS就行了，只是现在CSS还不够强大，实现需要用到很多奇技淫巧，但是，CSS现在已经在变得足够强大，比如:has伪类，相信未来CSS会越来越美好。