摘要：今天，我們用純實現評級。這時，當你某個時，這個及其后面的都同時變為黃色實體星。對內聯元素應用時要注意用純實現評級的效果就實現了代碼如下用實現評級效果思路當元素觸發事件時，賦予不同的值。

今天，我們用純CSS實現??評級。

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

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

    ☆☆☆☆☆
  

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

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

代碼如下：

.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";
};

字符實體

字符集

unicode-bidide 的用法