html – 悬停在星星上时的星级评分css问题

概述当我徘徊在一些星星上时,我有一个奇怪的问题.明星效应应该正常工作,当用户徘徊第二颗星时,第一颗星也应该被填充,当用户在第三颗星上徘徊时,应该也填充前一颗星. 的jsfiddle： http://jsfiddle.net/tkh2czee/ HTML <ul class="star-rating"> <li><a id="1" title="1 star out of 5" class="o 当我徘徊在一些星星上时,我有一个奇怪的问题.明星效应应该正常工作,当用户徘徊第二颗星时,第一颗星也应该被填充,当用户在第三颗星上徘徊时,应该也填充前一颗星.

的Jsfiddle：

http://jsfiddle.net/tkh2czee/

HTML

<ul >    <li><a ID="1" title="1 star out of 5" >1</a></li>    <li><a ID="2" title="2 stars out of 5" >2</a></li>    <li><a ID="3" title="3 stars out of 5" >3</a></li>    <li><a ID="4" title="4 stars out of 5" >4</a></li>    <li><a ID="5" title="5 stars out of 5" >5</a></li></ul>

CSS

.star-rating{    List-style:none;    margin: 0 auto;    padding:0px;    wIDth: 250px;    height: 50px;    position: relative;    background: url(http://s11.postimg.org/cfr9p1xjz/alt_star.png) top left repeat-x;       }.star-rating li{    padding:0px;    margin:0px;    float: left;}.star-rating li a{    display:block;    wIDth:50px;    height: 50px;    text-decoration: none;    text-indent: -9000px;    z-index: 40;    padding: 0px;}.star-rating li a:hover{    background: url(http://s11.postimg.org/cfr9p1xjz/alt_star.png) left bottom;    z-index: 4;    left: 0px;}.star-rating a.one-star{    left: 0px;}.star-rating a.one-star:hover{    wIDth:50px;}.star-rating a.two-stars{    left:50px;}.star-rating a.two-stars:hover{    wIDth: 100px;}.star-rating a.three-stars{    left: 100px;}.star-rating a.three-stars:hover{    wIDth: 150px;}.star-rating a.four-stars{    left: 150px;}   .star-rating a.four-stars:hover{    wIDth: 200px;}.star-rating a.five-stars{    left: 200px;}.star-rating a.five-stars:hover{    wIDth: 250px;}.star-rating li.current-rating{    background: url(http://s11.postimg.org/cfr9p1xjz/alt_star.png) left center;    position: absolute;    height: 50px;    display: block;    text-indent: -9000px;    z-index: 1;}

解决方法 为你的星星添加一个定位,这应该是有用的. http://jsfiddle.net/tkh2czee/2/

.star-rating li a{  position: absolute;  ...}

总结

以上是内存溢出为你收集整理的html – 悬停在星星上时的星级评分css问题全部内容，希望文章能够帮你解决html – 悬停在星星上时的星级评分css问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。