如何判断一张图片的左边右边

Question

现在要实现的效果是，点击星星的左半边分值加一，右边加二，好像用css sprite可以实现，大概是怎样的实现逻辑，如何定位？

Answer 1

實現

jsFiddle

說明

基本上可以分成幾個部分：

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; // <--
}

float: right 後，在 Html 中前面的會變成最右邊 ， 但是 css 選擇器是看 Html 實際順序。