css has selector 點香效果

 

因為在 codepen 上看到老外的這個 煙霧效果 覺得很酷 , 就幹來變成夢寐以求的點香效果 , 順便練練手 XD

點香原理就是利用 checkbox 先放在開頭 , 看是要設定位置為負的還是隱藏皆可 , 反正就是撒旦常說的障眼法 , 接著讓 ~ 去選到後面的元素 , 利用 label 的 for 屬性去控制 checkbox 被點到即可搞定

See the Pen incense-and-turtle by 喇賽人 (@weber87na) on CodePen.

此外剛好看到 css has selector , 所以順手玩看看 , 比較有趣的是以前用這種寫法的話 checkbox 通常都要放在 html 的開頭才有辦法用 ~ 去吃到後面的元素
有了 has selector 以後就可以不用一定要放在開頭 , html 結構上來說相對彈性

body:has(input:checked) .ag-sherlock_smoke,
body:has(input:checked) .incense::before{
	display: block;
}