转载

纯CSS实现星型⭐️评级

今天，我们用纯CSS实现:star:️评级。

案例效果

分析：正常情况下为空心的☆，鼠标 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 的☆就变为实体黄色的:star:️了。

2.接下来，我们要实现当我 hover 某个☆时，不仅这一个，它前面的☆也都要变为黄色实体的:star:️。

首先，我们要用到通用兄弟选择器 ~

在使用 ~ 连接两个元素时,它会匹配第二个元素,条件是它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素 .比如：div~p就会匹配与div同辈的且在div之后的所有p元素。

当我们 hover 某个☆时，我们利用通用兄弟选择器使后面的☆也同时变为黄色实体星:star:️。

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

这时，当你 hover 某个☆时，这个及其后面的☆都同时变为黄色实体星:star:️。

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:️，但是由于此时从右向左显示，它的后面兄弟元素就变到“前面”来了。

.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实现:star:️评级的效果就实现了！

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 的用法]( https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi ）

正文到此结束

所属分类：编程技术

本文标签： http IDE example tar Developer value js Document https HTML web 代码 CSS
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二