CSS 小技巧:纯Css实现hover默认高亮显示

如上图,默认第一个标题高亮,在hover其他样式的时候,同步高亮显示:

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

很多人的第一反应是用js来控制样式,如果css能实现的功能,就没必要使用js啦,这里主要涉及css的transition属性的属性;

在vue项目中,可以参考一下demo








你可能感兴趣的:(CSS,html,css3,html5)