摘要：今天，我們用純實(shí)現(xiàn)評級。這時(shí)，當(dāng)你某個(gè)時(shí)，這個(gè)及其后面的都同時(shí)變?yōu)辄S色實(shí)體星。對內(nèi)聯(lián)元素應(yīng)用時(shí)要注意用純實(shí)現(xiàn)評級的效果就實(shí)現(xiàn)了代碼如下用實(shí)現(xiàn)評級效果思路當(dāng)元素觸發(fā)事件時(shí)，賦予不同的值。

今天，我們用純CSS實(shí)現(xiàn)??評級。

分析：正常情況下為空心的☆，鼠標(biāo)hover時(shí)，變?yōu)閷?shí)心黃色的★.

div.star包裹5個(gè)span,每個(gè)span的內(nèi)容為空心的☆.HTML代碼如下：

    ☆☆☆☆☆
  

1.分析：當(dāng)我們hover時(shí)，我們用實(shí)心的★覆蓋空心的☆，并給實(shí)心的★設(shè)置color:gold;.

要覆蓋空心的☆，我們要利用為元素::before，并賦予content:"★".同時(shí)為了實(shí)現(xiàn)覆蓋，而不是在之前添加內(nèi)容，我們需要為元素設(shè)置position:absolute;.

這時(shí)，當(dāng)你hover時(shí)，hover的☆就變?yōu)閷?shí)體黃色的??了。

2.接下來，我們要實(shí)現(xiàn)當(dāng)我hover某個(gè)☆時(shí)，不僅這一個(gè)，它前面的☆也都要變?yōu)辄S色實(shí)體的??。
首先，我們要用到通用兄弟選擇器~

在使用 ~ 連接兩個(gè)元素時(shí),它會匹配第二個(gè)元素,條件是它必須跟(不一定是緊跟)在第一個(gè)元素之后,且他們都有一個(gè)共同的父元素 .
比如：div~p就會匹配與div同輩的且在div之后的所有p元素。

當(dāng)我們hover某個(gè)☆時(shí)，我們利用通用兄弟選擇器使后面的☆也同時(shí)變?yōu)辄S色實(shí)體星??。

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

這時(shí)，當(dāng)你hover某個(gè)☆時(shí)，這個(gè)及其后面的☆都同時(shí)變?yōu)辄S色實(shí)體星??。

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.

這樣的話，當(dāng)我們hover時(shí)，還是這個(gè)及其后面的☆都同時(shí)變?yōu)辄S色實(shí)體星??，但是由于此時(shí)從右向左顯示，它的后面兄弟元素就變到“前面”來了。

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

對內(nèi)聯(lián)元素應(yīng)用direction時(shí)要注意:

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實(shí)現(xiàn)??評級的效果就實(shí)現(xiàn)了！

CSS代碼如下：

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

思路：當(dāng)元素觸發(fā)onmouseover事件時(shí)，賦予不同的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";
};

字符實(shí)體

字符集

unicode-bidide 的用法