项目开发中要给dom添加点击事件可能都会想到用js来实现,但是某些场景下使用css来实现会更加优雅,下面进入正题
- 1.实现思路 对于原生的dom,能够响应鼠标点击的惟input 框的checkbox 和 radio,可以利用他们来实现css中的点击效果
- 简单的案例 下面我要实现为 id为box 的盒子添加一个点击效果,当点击后颜色变为蓝色
总结:
- 利用input框的checked来响应鼠标的点击
- 利用label 标签来关联input 和其他dom元素 利用 + 相邻兄弟选择器 或者 ~ 兄弟选择器,选中需要改变样式的元素,并编写改变的样式 最后将input 隐藏起来
- 注意:
当你要为多个按钮绑定一个点击事件时,可以使用 radio 目标元素必须定义在input同级dom元素,或者同级dom的子元素下,要不然无法使用 + & ~ 来选中 css点击事件只能处理样式改变 下面案例使用 radio 来做点击效果
以上的案例,可以用在轮播图的制作,或是当个按钮的点击,可以快速实现某个元素的点击效果