使用CSS實現星級評價效果

原文：http://css-tricks.com/star-ratings/

 

         星標記是經典的UX模式之一。我有個想法，通過不使用Javascript來實現該功能。

        

         標記符使用的是Unicode編碼的星型號 (☆)。若你使用的是UTF-8字符集，也可以。當然，你也可以使用☆。你可以如此佈置更多的星星：

<divclass="rating">	
  <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>

         接下來，需要實現實心的星星符號（可在此圖像集查看到一些字符）。非常簡單，只是實現實心星星元素的:hover僞類方法。

.rating > span:hover:before {
  content: "\2605";
  position: absolute;
}

         使用絕對位置放置後，很方便的實現了再瀏覽器中top:0;left:0;形式的放置。到此，實體星星直接放置在了空心星星的上方。你可以自定義的更改大小以及顏色。

         但是當前只實現了單個星星的變換。但UX模式要求所有的星星都需要被填充。例如：若鼠標滑過第四個星星，那麼前四個星星都將被變換。

         在CSS中，無法選擇先前的子元素。然而，有一種方式可以選擇後續的元素，即通過同胞選擇器。如果我們倒序排列這些字符，那麼我們能夠使用同胞選擇器來獲取懸浮星星之前的所有星星，但是必須在懸浮星星的之後操作。

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

         到此，此功能就完成了。我們只使用了簡單的CSS代碼就實現此功能，恭喜一下吧。完整代碼如下：

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

         Demo查看

         Dabblet編輯地址

         實際的用處：

                   實際中，JavaScript在評論星級的時候必被包含的。當用戶點擊星星後，星星等級將通過Ajax方式傳輸，並在窗口永久性的顯示評論的等級。若Javascript已經被包含，通過給星星添加觸發器來實現不是很好嘛？若你的應用，已經絕對依賴於Javascript，那麼這是肯定的。若你想不用Javascript建站，那麼此篇功能將是你需要的。你可以查看 LeaVerou's example ，如何使用表單中的單選按鈕來傳遞評價等級。