CSS點擊顯示勾可以讓網頁交互更加友好,讓用戶知道哪些操作已經完成。以下是實現CSS點擊顯示勾的代碼:
/* 隱藏勾的樣式 */ .tick { display: none; } /* 點擊后顯示勾的樣式 */ :checked + .tick { display: inline-block; }
可以看出這是使用:checked
偽類選擇器實現的。首先定義一個隱藏勾的樣式.tick
,然后在需要顯示勾的元素的后面設置一個.tick
元素,使用:checked + .tick
選擇器,讀作“被選中的元素的相鄰后代元素”,表示當前元素被選中時,它的下一個兄弟元素即.tick
會被顯示出來。需要注意的是,.tick
元素默認要先隱藏,否則不符合需求。
這種實現方式思路簡單,代碼量較少,適合大多數簡單場景下的需求。當然,也可以使用JavaScript實現固定位置的勾的顯示與隱藏,觸發事件更加靈活,但代碼會相對復雜。
上一篇mysql添加緩存