純 CSS 實現星型 ☆ 評級

今天，咱們用純CSS實現⭐️評級。

案例效果

分析：正常狀況下爲空心的☆，鼠標hover時，變爲實心黃色的★.

HTML分析

div.star包裹5個span,每一個span的內容爲空心的☆.HTML代碼以下：

<div class="star">
    <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
  </div>

CSS分析

1.分析：當咱們hover時，咱們用實心的★覆蓋空心的☆，並給實心的★設置color:gold;.

要覆蓋空心的☆，咱們要利用爲元素::before，並賦予content:'★'.同時爲了實現覆蓋，而不是在以前添加內容，咱們須要爲元素設置position:absolute;.

這時，當你hover時，hover的☆就變爲實體黃色的⭐️了。

2.接下來，咱們要實現當我hover某個☆時，不只這一個，它前面的☆也都要變爲黃色實體的⭐️。
首先，咱們要用到通用兄弟選擇器~

在使用 ~ 鏈接兩個元素時,它會匹配第二個元素,條件是它必須跟(不必定是緊跟)在第一個元素以後,且他們都有一個共同的父元素 .
好比：div~p就會匹配與div同輩的且在div以後的全部p元素。

當咱們hover某個☆時，咱們利用通用兄弟選擇器使後面的☆也同時變爲黃色實體星⭐️。

span:hover::before,
span:hover~span::before{
  content:'★';
  color:gold;
  position:absolute;
}

這時，當你hover某個☆時，這個及其後面的☆都同時變爲黃色實體星⭐️。

3.最後，咱們利用unicode-bidi,direction屬性，使文本由右向左顯示。

The unicode-bidi CSS property together with the direction property relates to the handling of bidirectional text in a document.For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding.

這樣的話，當咱們hover時，仍是這個及其後面的☆都同時變爲黃色實體星⭐️，可是因爲此時從右向左顯示，它的後面兄弟元素就變到「前面」來了。

.star{unicode-bidi: bidi-override;direction:rtl;}

對內聯元素應用direction時要注意:

For the direction property to have any effect on inline-level elements, the unicode-bidi property's value must be embed or override.

OK. 用純CSS實現⭐️評級的效果就實現了！

CSS代碼以下：

span:hover::before,
span:hover~span::before{
  content:'★';
  color:gold;
  position:absolute;
} 
.star{
  unicode-bidi:bidi-overrride;
  direction:rtl;
}

用 JS 實現評級效果

思路：當元素觸發onmouseover事件時，賦予不一樣的class值。

代碼以下：

<div class="heart">
    <a href="" id="one" class="heart-off"></a>
    <a href="" id="two" class="heart-off"></a>
    <a href="" id="three" class="heart-off"></a>
    <a href="" id="four" class="heart-off"></a>
    <a href="" id="five" class="heart-off"></a>
  </div>

.heart-off,.heart-on,.heart-hover{
  text-decoration:none;
}

.heart-off:before,.heart-on:before,.heart-hover:before{
  content:'\2665';
}
.heart-off{color:rgba(150,150,150,.5);}
.heart-on{color:rgba(255,0,0,.5);}
.heart-hover{color:rgba(255,0,0,1);}

one.onmouseover=function(){
  this.className="heart-hover";
  two.className="heart-off";
  three.className="heart-off";
  four.className="heart-off";
  five.className="heart-off";
};

two.onmouseover=function(){
  this.className="heart-hover";
  one.className="heart-on";
  three.className="heart-off";
  four.className="heart-off";
  five.className="heart-off";
};

three.onmouseover=function(){
  this.className="heart-hover";
  one.className="heart-on";
  two.className="heart-on";
  four.className="heart-off";
  five.className="heart-off";
};

four.onmouseover=function(){
  this.className="heart-hover";
  one.className="heart-on";
  two.className="heart-on";
  three.className="heart-on";
  five.className="heart-off";
};

five.onmouseover=function(){
  this.className="heart-hover";
  one.className="heart-on";
  two.className="heart-on";
  three.className="heart-on";
  four.className="heart-on";
};

參考資料

1. 字符實體

2. 字符集

3. unicode-bidide 的用法