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

今天跟大家介绍一下css中transition的使用小技巧，我们先来看一个首页排行榜效果：

====================================================================================================================================================

怎么样，是不是一个很熟悉的效果，那么很多人可能第一时间就会想到用js来实现，但是，css能够实现的又何必动用js呢？在我看来，js就应该回归本职，专心处理数据逻辑交互，视觉方面交给css就行了。这里要介绍的就是transition属性延迟的一些小技巧，一起来看看吧！

这里的逻辑交互有以下几个，我们一次来进行实现：

1.鼠标滑过触发选中状态；
2.鼠标移出列表后仍然保留上一次的选中状态；（重点）
3.默认列表的第一项为选中状态；

一、鼠标滑过触发选中状态

我们先简单布一下局

<ul class="list"><li class="item"><h3 class="title">将军，夫人喊你种田了</h3><p class="sumary">只是在休息室里打了个盹儿，一睁眼，竟然穿成了古代目不识丁的乡下胖丫头。好吃懒做不说，还在村里横行霸道。十里八乡没人愿意娶她，好不容易买了个金龟婿，大婚之日竟让人逃了。恶霸老爹一怒之下去道上掳了个夫君给她。就是……爹你掳的是不是有点不太对呀？ ＊ 婚后的苏胖丫很忙。忙着改造恶霸爹爹与恶霸弟弟。 忙着抢救貌美如花的神将夫君。忙着养育三个小小恶霸小豆丁。一不小心，将自己忙成了大燕最位高权重的一品女侯！</p></li><li class="item"><h3 class="title">被夺一切后她封神回归</h3><p class="sumary">【甜爽燃，团宠，玄学】司扶倾一睁眼，不仅被夺了气运，人人还让她滚出娱乐圈。重活一次，她只想咸鱼躺，谁知现在圈内人只知拉踩营销，没点真本事，不好好磨炼演技，这样下去还能行？怎么也得收拾收拾。司扶倾捏了捏手腕，动了。后来，网上疯狂骂她不自量力倒贴郁曜，造谣她私生活不检点，而——国际天后：今天我能站在这里，多亏了倾倾 top1男顶流：离我妹妹远点@郁曜就连国际运动会官方：恭喜司扶倾拿下第13枚个人金牌，等一个退圈当天ÿ