专栏名称: 前端早读课
我们关注前端,产品体验设计,更关注前端同行的成长。 每天清晨五点早读,四万+同行相伴成长。
今天看啥  ›  专栏  ›  前端早读课

【第2853期】CSS transition 小技巧!如何保留 hover 的状态?

前端早读课  · 公众号  · 前端  · 2023-02-11 08:05
前言能用 CSS 实现的就不想用 JS。今日前端早读课文章由 @XboxYan 分享,公号:前端侦探授权。@XboxYan,阅文体验设计部,专注用户体验相关,热爱 CSS,热爱原生,github:https://github.com/XboxYan正文从这开始~~通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了。 el:hover{ color: red }这就意味着,如果需要保留 hover 的状态,可能就不得不借助 JS 了,比如下面是某某书院的首页排行榜效果。这里的主要交互有以下几个鼠标滑过触发选中态鼠标移出列表后仍然保留上一次的选中态(重点)默认列表的第一项为选中态目前官网的实现也是通过 JS 实现的,事实上,仅仅通过 CSS 也是可以完全做到的,需要用到 transition 延时的一些小技巧,一起看看吧。一、鼠标滑过触发选中态所有的一切都离不开布局。假设列表 HTML 是这样的 ul clas ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照