今天,我们用纯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";
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。