的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问题所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)