用纯css实现打星星效果（三）

头像
XboxYan
    阅读 8 分钟
    6

    题外话

    查看原文可以有更好的排版效果哦

    从后面开始，文章中的代码演示会用Codepen来替代。

    这样做的好处有

    1. 方便自己对所写过的demo进行统一的管理
    2. 方便文章中的展示，前面都是直接在文章中嵌入html代码和css样式，这样就会造成css样式名的冲突，前面的解决方式就是不断的重新命名 star、star01、star02等等这些
    3. 方便转载到其他平台。由于markdown语法中的html内嵌并不是一个标准语法，因而把内嵌大量html的markdown复制到其他平台，比如segmentfault，就会出现乱码的问题

    Start

    前面已经介绍了两种纯css实现打星星效果的方式，接下来继续扩展更多的功能，看着更接近平时说见到的效果，我们仍然会坚持用css来实现

    如何实现鼠标滑动时有文字提示？

    我们这里说的文字变化不是说那个title效果，我们在淘宝上会见到当我们滑动鼠标在不同的星星上时，右边会有一个文字，分别提示类似于 满意，非常满意，一般， 这样的提示效果，现在我们就来实现这样的效果。

    先看效果

    https://codepen.io/xboxyan/pe...

    结构

    html结构还是引用上一篇的:

    <style>
.star{
   display: inline-block;
   font-size: 0;
}
.star-item{
   display: inline-block;
   width: 20px;
   height:20px;
   cursor: pointer;
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAMAAADJ7yrpAAAAYFBMVEUAAAD92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92UmCTPEWAAAAH3RSTlMA9iwe++hAgPLJo13i3Td8JO3Sk4xtYkYUC76cVBIjGgBFCwAAAMtJREFUKM+1kUkOhCAQRUEFBHGep67737JRlEFNJ73wbyAv9WtRD/1O3z/AqrqzDqC7spEAkPECGagwlwRJE28wbpJAk5xjcIJ5rmBBwAsp9nLpsvJYkMWWxRk6QrHZSJFJesIU2UQnjCwLwSQ0kG4zQmzzdmcCuA5VocaQGNiyQX8G1qK/8q6jNH1wtCx3RxwhfnUkM3Vs6ToSdNUDK52NI6JL+4R1JD/HYaXriOsP9xxN+p08R0JV1ZlnzxELRBSJIPccSe1IvufoCxGAFoLwSVOBAAAAAElFTkSuQmCC') center top no-repeat;
}
input[type="radio"]{
   position: absolute;
   clip: rect(0,0,0,0)
}
input[type="radio"]:checked~.star-item{
    background-position: center bottom;
}
.star:hover label.star-item{
   background-position: center top;
}
label.star-item:hover~.star-item{
   background-position: center bottom;
}
</style>
<div class="star">
    <label class="star-item" for="item01" title="垃圾"></label>
    <input type="radio" name="item" id="item01" checked /><!--这里设置checked初始状态-->
    <label class="star-item" for="item02" title="很差"></label>
    <input type="radio" name="item" id="item02" />
    <label class="star-item" for="item03" title="一般"></label>
    <input type="radio" name="item" id="item03" />
    <label class="star-item" for="item04" title="很好"></label>
    <input type="radio" name="item" id="item04" />
    <label class="star-item" for="item05" title="完美"></label>
    <input type="radio" name="item" id="item05" />
</div>

    一点思路

    如果想实现星星最后面有一行提示文字，按照一般的思路，可能就是在最后一颗星星后面直接添加一个标签span，然后通过js监听mouseover和mouseout事件来修改span的innerHTML，只要会点js的通应该能实现，那么通过css如何实现呢？

    显然是不能直接修改innerhtml的，那么该如何修改呢？

    我们可以直接用:after伪元素来生成内容，比如

    span:after{content:'我是生成的内容'}

    那么我们就可以通过伪元素的content来用css生成内容

    修改一下结构

    <div class="star">
    <label class="star-item" for="item01" title="垃圾"></label>
    <input type="radio" name="item" id="item01" checked /><!--这里设置checked初始状态-->
    <label class="star-item" for="item02" title="很差"></label>
    <input type="radio" name="item" id="item02" />
    <label class="star-item" for="item03" title="一般"></label>
    <input type="radio" name="item" id="item03" />
    <label class="star-item" for="item04" title="很好"></label>
    <input type="radio" name="item" id="item04" />
    <label class="star-item" for="item05" title="完美"></label>
    <input type="radio" name="item" id="item05" />
    <span class="star-tip"></span><!--添加一个标签来存放文字提示-->
</div>

    现在我们再来添加一点css来生成内容

    .star-item[title="垃圾"]:hover~.star-tip:after{
   contnet:"垃圾"
}

    这样当鼠标滑过第一个星星的时候，后面就会生成垃圾的提示。

    全部写完整就是

    .star-item[title="垃圾"]:hover~.star-tip:after{
   contnet:"垃圾"
}
.star-item[title="很差"]:hover~.star-tip:after{
   contnet:"很差"
}
.star-item[title="一般"]:hover~.star-tip:after{
   contnet:"一般"
}
.star-item[title="很好"]:hover~.star-tip:after{
   contnet:"很好"
}
.star-item[title="完美"]:hover~.star-tip:after{
   contnet:"完美"
}

    这样应该可以实现鼠标移动到哪就提示相应的文字，但是，不觉得这样写法有点太不智能了吗，完全就是复制粘贴，如果有Less或者Sass可以简单写一个循环就可以自动生成这些了，但是本质还是一样的，写了这么多重复的代码，也没法合并，难道css就没办法了吗？

    其实还是有的，我们要用到content的attr功能，就是取到相应属性的值，有点变量的意思，比如

    <style>
  span:after{content:attr(a)}
</style>
<span a="我是A"></span>

    这样span就会根据自身的a属性来生成内容了

    我们现在把之前添加的<span class="star-tip"></span>去掉，不可能再根据他那生成了，我们现在需要根据label自身来生成内容，添加如下css

    .star{
   position:relative;/*添加相对定位，因为生成的内容要相对于最外层了*/
}
.star-item:after{/*加点样式*/
   position:absolute;
   width:100px;
   font-size:14px;
   height:20px;
   line-height:20px;
   right:0;
   margin-right:-105px;
   color:#666
}
.star-item:hover:after{
   content:attr(title)
}

    这样还不够，我们还需要根据:checked记住当前选项

    input[type="radio"]:checked+.star-item:after{/*选择input相邻的下一个label*/
   content:attr(title)
}

    这里有个问题，label和input的顺序反过来了，这里我们对调一下，所以之前的代码需要修复一下

    <style>
.star{
   display: inline-block;
   font-size: 0;
}
.star-item{
   display: inline-block;
   width: 20px;
   height:20px;
   cursor: pointer;
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAMAAADJ7yrpAAAAYFBMVEUAAAD92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92UmCTPEWAAAAH3RSTlMA9iwe++hAgPLJo13i3Td8JO3Sk4xtYkYUC76cVBIjGgBFCwAAAMtJREFUKM+1kUkOhCAQRUEFBHGep67737JRlEFNJ73wbyAv9WtRD/1O3z/AqrqzDqC7spEAkPECGagwlwRJE28wbpJAk5xjcIJ5rmBBwAsp9nLpsvJYkMWWxRk6QrHZSJFJesIU2UQnjCwLwSQ0kG4zQmzzdmcCuA5VocaQGNiyQX8G1qK/8q6jNH1wtCx3RxwhfnUkM3Vs6ToSdNUDK52NI6JL+4R1JD/HYaXriOsP9xxN+p08R0JV1ZlnzxELRBSJIPccSe1IvufoCxGAFoLwSVOBAAAAAElFTkSuQmCC') center top no-repeat;
}
input[type="radio"]{
   position: absolute;
   clip: rect(0,0,0,0)
}
input[type="radio"]:checked+.star-item~.star-item{/**这里需要排除掉当前选项，所以选择的是下一个（+）节点的后面的（~）节点**/
    background-position: center bottom;
}
.star:hover label.star-item{
   background-position: center top!important;/**由于前面的选择器层级较高，这里简单用!important来处理**/
}
label.star-item:hover~.star-item{
   background-position: center bottom!important;
}
</style>
<div class="star">
    <input type="radio" name="item" id="item01" checked /><!--这里设置checked初始状态-->
    <label class="star-item" for="item01" title="垃圾"></label>
    <input type="radio" name="item" id="item02" />
    <label class="star-item" for="item02" title="很差"></label>
    <input type="radio" name="item" id="item03" />
    <label class="star-item" for="item03" title="一般"></label>
    <input type="radio" name="item" id="item04" />
    <label class="star-item" for="item04" title="很好"></label>
    <input type="radio" name="item" id="item05" />
    <label class="star-item" for="item05" title="完美"></label>
</div>

    这样也能达到同样的效果，选中效果效果也出来了，但是选中和滑动会有重叠效果，选择需要在滑动时去掉选中效果，同样是先清空再添加的思路

    .star:hover .star-item:after{
  content:''!important
}

input[type="radio"]:checked+.star-item:after{
   content:attr(title)
}

.star:hover .star-item:hover:after{
   content:attr(title)!important
}

    注意里面的层级覆盖关系，可以多试一下。

    下面奉献完整代码

    <style>
.star{
   display: inline-block;
   font-size: 0;
   position:relative;
}
.star-item{
   display: inline-block;
   width: 20px;
   height:20px;
   cursor: pointer;
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAMAAADJ7yrpAAAAYFBMVEUAAAD92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92UmCTPEWAAAAH3RSTlMA9iwe++hAgPLJo13i3Td8JO3Sk4xtYkYUC76cVBIjGgBFCwAAAMtJREFUKM+1kUkOhCAQRUEFBHGep67737JRlEFNJ73wbyAv9WtRD/1O3z/AqrqzDqC7spEAkPECGagwlwRJE28wbpJAk5xjcIJ5rmBBwAsp9nLpsvJYkMWWxRk6QrHZSJFJesIU2UQnjCwLwSQ0kG4zQmzzdmcCuA5VocaQGNiyQX8G1qK/8q6jNH1wtCx3RxwhfnUkM3Vs6ToSdNUDK52NI6JL+4R1JD/HYaXriOsP9xxN+p08R0JV1ZlnzxELRBSJIPccSe1IvufoCxGAFoLwSVOBAAAAAElFTkSuQmCC') center top no-repeat;
}
input[type="radio"]{
   position: absolute;
   clip: rect(0,0,0,0)
}
input[type="radio"]:checked+.star-item~.star-item{/**这里需要排除掉当前选项，所以选择的是下一个（+）节点的后面的（~）节点**/
    background-position: center bottom;
}
.star:hover label.star-item{
   background-position: center top!important;/**由于前面的选择器层级较高，这里简单用!important来处理**/
}
label.star-item:hover~.star-item{
   background-position: center bottom!important;
}

.star-item:after{/*加点样式*/
   position:absolute;
   width:100px;
   font-size:14px;
   height:20px;
   line-height:20px;
   right:0;
   margin-right:-105px;
   color:#666
}

.star:hover .star-item:after{
  content:''!important
}

input[type="radio"]:checked+.star-item:after{
   content:attr(title)
}

.star:hover .star-item:hover:after{
   content:attr(title)!important
}
</style>
<div class="star">
    <input type="radio" name="item" id="item01" checked /><!--这里设置checked初始状态-->
    <label class="star-item" for="item01" title="垃圾"></label>
    <input type="radio" name="item" id="item02" />
    <label class="star-item" for="item02" title="很差"></label>
    <input type="radio" name="item" id="item03" />
    <label class="star-item" for="item03" title="一般"></label>
    <input type="radio" name="item" id="item04" />
    <label class="star-item" for="item04" title="很好"></label>
    <input type="radio" name="item" id="item05" />
    <label class="star-item" for="item05" title="完美"></label>
</div>

    codepen效果

    https://codepen.io/xboxyan/pe...

    小节

    通过一番努力，这个打星星效果基本上满足一般的业务需求，没有用到任何js代码，完美兼容ie8浏览器，应该能体现出css的强大之处吧，虽然css现在还比较蹩脚，但是用css的思路来实现一个逻辑还挺有意思的，可以从更多的角度去解决一个问题，有时反而会更简单

    前端css
    XboxYan
    18.1k 声望14.1k 粉丝
    « 上一篇
    电影天堂React Native 客户端
    下一篇 »
    用纯css实现Tab切换

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    0 条评论
    得票最新