纯CSS实现星型⭐️评级_html/css_WEB-ITnose

php中文网
发布: 2016-06-21 09:03:48
原创
1790人浏览过

今天,我们用纯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的用法](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi)

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号