項(xiàng)目中遇到了需要實(shí)現(xiàn)點(diǎn)擊有勾選效果的情況,試了一下通過偽元素的方式實(shí)現(xiàn)了.
需要達(dá)到的效果:
????????左邊是點(diǎn)擊后的效果,右邊是原始的效果.
需要達(dá)到的效果圖
直接上代碼:
html
li標(biāo)簽的設(shè)置為相對(duì)定位.div為絕對(duì)定位,通過為元素定位的方式實(shí)現(xiàn).
css
js就是普通的點(diǎn)擊事件.切換類名來實(shí)現(xiàn).
js
