纯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 ）
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
-
-
-
-
-
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
