新属性:has的使用场景

2022/10/24 文章推荐 共 413 字,约 2 分钟

:has 属性,你想不到的使用场景快来看看吧,共享有趣的文章,分享使用的文章

文章推荐

1. :has伪类可以做些什么=>根据子元素,设置父元素的样式

推荐理由:

  1. 表单元素必填项如何实现

  2. 拖拽指定区域hover出现小手

  3. 阻止css多层级冒泡的 hover

  4. 日期范围选择连续选中效果

  5. 前面几个还是很值得试一试的,后面的有点难,但也可以试试

CSS 有了:has伪类可以做些什么?

2. has 实现3d轮播图

推荐理由:

  1. has 修改相邻元素的样式

  2. 轮播图自动轮播和暂停可以借助animationiteration回调

借助 :has 实现3d轮播图

3. css 能实现一些你不知道的事件

推荐理由:

  1. transitionend 实现 hover 延时触发

  2. transitionend 实现长按触发事件

  3. animationiteration 实现播放,配合:hover{animation-play-state: paused; /hover暂停/} 实现暂停

还在用定时器吗?借助 CSS 来监听事件


在技术的历史长河中,虽然我们素未谋面,却已相识已久,很微妙也很知足。互联网让世界变得更小,你我之间更近。

在逝去的青葱岁月中,虽然我们未曾相遇,却共同经历着一样的情愫。谁的青春不曾迷茫或焦虑亦是无奈,谁不曾年少过

在未来的日子里,让我们共享好的文章,共同学习进步。有不错的文章记得分享给我,我不会写好的文章,所以我只能做一个搬运工

我叫 sunseekers(张敏) ,千千万万个张敏与你同在,18年电子商务专业毕业,毕业后在前端搬砖

如果喜欢我的话,恰巧我也喜欢你的话,让我们手拉手,肩并肩共同前行,相互学习,互相鼓励

文档信息

Search

    Table of Contents