摘要：题外话查看原文可以有更好的排版效果哦从后面开始，文章中的代码演示会用来替代。
题外话
查看原文可以有更好的排版效果哦
从后面开始，文章中的代码演示会用Codepen来替代。
这样做的好处有
方便自己对所写过的demo进行统一的管理
方便文章中的展示，前面都是直接在文章中嵌入html代码和css样式，这样就会造成css样式名的冲突，前面的解决方式就是不断的重新命名 star、star01、star02等等这些
方便转载到其他平台。由于markdown语法中的html内嵌并不是一个标准语法，因而把内嵌大量html的markdown复制到其他平台，比如segmentfault，就会出现乱码的问题
Start前面已经介绍了两种纯css实现打星星效果的方式，接下来继续扩展更多的功能，看着更接近平时说见到的效果，我们仍然会坚持用css来实现
如何实现鼠标滑动时有文字提示？我们这里说的文字变化不是说那个title效果，我们在淘宝上会见到当我们滑动鼠标在不同的星星上时，右边会有一个文字，分别提示类似于 满意，非常满意，一般， 这样的提示效果，现在我们就来实现这样的效果。
先看效果https://codepen.io/xboxyan/pe...
结构html结构还是引用上一篇的:
一点思路
如果想实现星星最后面有一行提示文字，按照一般的思路，可能就是在最后一颗星星后面直接添加一个标签span，然后通过js监听mouseover和mouseout事件来修改span的innerHTML，只要会点js的通应该能实现，那么通过css如何实现呢？
显然是不能直接修改innerhtml的，那么该如何修改呢？
我们可以直接用:after伪元素来生成内容，比如
span:after{content:"我是生成的内容"}
那么我们就可以通过伪元素的content来用css生成内容
修改一下结构现在我们再来添加一点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功能，就是取到相应属性的值，有点变量的意思，比如
这样span就会根据自身的a属性来生成内容了
我们现在把之前添加的去掉，不可能再根据他那生成了，我们现在需要根据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的顺序反过来了，这里我们对调一下，所以之前的代码需要修复一下
这样也能达到同样的效果，选中效果效果也出来了，但是选中和滑动会有重叠效果，选择需要在滑动时去掉选中效果，同样是先清空再添加的思路
.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
}
注意里面的层级覆盖关系，可以多试一下。
下面奉献完整代码
codepen效果
https://codepen.io/xboxyan/pe...
小节通过一番努力，这个打星星效果基本上满足一般的业务需求，没有用到任何js代码，完美兼容ie8浏览器，应该能体现出css的强大之处吧，虽然css现在还比较蹩脚，但是用css的思路来实现一个逻辑还挺有意思的，可以从更多的角度去解决一个问题，有时反而会更简单
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116881.html
摘要：后代选择器，可以选择子元素，却没法选择父元素。这里说的有关联指的是相近或者相反，比如子选择器和后代选择器就是比较相近的如果要实现鼠标相关的功能，可能就会联想到等选择器。 首先看一个效果，注意地址栏的变化 showImg(https://segmentfault.com/img/remote/1460000016937042?w=1058&h=433); 然后思考一下，用css如何实现？...
摘要：后代选择器，可以选择子元素，却没法选择父元素。这里说的有关联指的是相近或者相反，比如子选择器和后代选择器就是比较相近的如果要实现鼠标相关的功能，可能就会联想到等选择器。 首先看一个效果，注意地址栏的变化 showImg(https://segmentfault.com/img/remote/1460000016937042?w=1058&h=433); 然后思考一下，用css如何实现？...
摘要：前不久做了一个国际化的项目，基于和，里面用到了国际化，使用方式也很简单然后，页面所有的官方组件都变成了中文默认是英文。前端配置是指如何根据需要把需要展示的语言显示在页面，比如在中文环境下显示中文，英文环境下显示英文，用户看得到才算数。 关于国际化 一个项目发展到一定的环境或者一开始就是为多国打造的，就需要考虑国际化了。简单来说，就是一套页面，多套语言。 前不久做了一个国际化的项目，基于...
摘要：前不久做了一个国际化的项目，基于和，里面用到了国际化，使用方式也很简单然后，页面所有的官方组件都变成了中文默认是英文。前端配置是指如何根据需要把需要展示的语言显示在页面，比如在中文环境下显示中文，英文环境下显示英文，用户看得到才算数。 关于国际化 一个项目发展到一定的环境或者一开始就是为多国打造的，就需要考虑国际化了。简单来说，就是一套页面，多套语言。 前不久做了一个国际化的项目，基于...
摘要：前不久做了一个国际化的项目，基于和，里面用到了国际化，使用方式也很简单然后，页面所有的官方组件都变成了中文默认是英文。前端配置是指如何根据需要把需要展示的语言显示在页面，比如在中文环境下显示中文，英文环境下显示英文，用户看得到才算数。 关于国际化 一个项目发展到一定的环境或者一开始就是为多国打造的，就需要考虑国际化了。简单来说，就是一套页面，多套语言。 前不久做了一个国际化的项目，基于...
阅读 2956·2023-04-25 17:22
阅读 1525·2019-08-30 15:54
阅读 1248·2019-08-30 15:53
阅读 1766·2019-08-30 15:43
阅读 2949·2019-08-29 12:29
阅读 1184·2019-08-26 11:37
阅读 3232·2019-08-23 18:02
阅读 1583·2019-08-23 14:15
