现在要实现的效果是,点击星星的左半边分值加一,右边加二,好像用css sprite可以实现,大概是怎样的实现逻辑,如何定位?
TA贡献1678条经验 获得超9个赞
實現
說明
基本上可以分成幾個部分:
redio本身的樣式不可修改 , 但是因為radio後的label可以操作前面對應的radio而且label樣式是可修改的, 所以我們可以通過隱藏radio input本身 , 然後修改label來達成自定義樣式的效果
至於左右邊分開效果,Font Awesome 有提供完整星星和半顆星的icon,可以利用其來達成你說的半顆星效果
.rating > input:checked ~ label, // 代表每個被選中的 radio 後面的 label.rating > label:hover, // 代表每個 hover 狀態的 label.rating > label:hover ~ label { color: #FFD700; } // 代表每個 hover 狀態後面的 label.rating > input:checked + label:hover,.rating > input:checked ~ label:hover,.rating > label:hover ~ input:checked ~ label,.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
會覺得奇怪的是,~是指之後的元素,那為什麼是高亮的星星是從左邊開始,其實:
.rating > label { color: #ddd; float: right; //