Html
    Css
    Js
/* 星星点灯照亮我的家门 */
.star_bg {
	width:120px;
	height:20px;
	background:url(http://www.jq22.com/tp/ea25e899-1f81-481c-bf6d-1cedd326b38f.png) repeat-x;
	position:relative;
	overflow:hidden;
}
.star {
	height:100%;
	width:24px;
	line-height:6em;
	position:absolute;
	z-index:3;
}
.star:hover {
	background:url(http://www.jq22.com/tp/ea25e899-1f81-481c-bf6d-1cedd326b38f.png) repeat-x 0 -20px!important;
	left:0;
	z-index:2;
}
.star_1 {
	left:0;
}
.star_2 {
	left:24px;
}
.star_3 {
	left:48px;
}
.star_4 {
	left:72px;
}
.star_5 {
	left:96px;
}
.star_1:hover {
	width:24px;
}
.star_2:hover {
	width:48px;
}
.star_3:hover {
	width:72px;
}
.star_4:hover {
	width:96px;
}
.star_5:hover {
	width:120px;
}
label {
	display:block;
	_display:inline;
	height:100%;
	width:100%;
	cursor:pointer;
}
/* 幕后的英雄,单选按钮 */
.score {
	position:absolute;
	clip:rect(0 0 0 0);
}
.score:checked + .star {
	background:url(http://www.jq22.com/tp/ea25e899-1f81-481c-bf6d-1cedd326b38f.png) repeat-x 0 -20px;
	left:0;
	z-index:1;
}
.score_1:checked ~ .star_1 {
	width:24px;
}
.score_2:checked ~ .star_2 {
	width:48px;
}
.score_3:checked ~ .star_3 {
	width:72px;
}
.score_4:checked ~ .star_4 {
	width:96px;
}
.score_5:checked ~ .star_5 {
	width:120px;
}
.star_bg:hover .star {
	background-image:none;
}
/* for IE6-IE8 JS 交互 */
.star_checked {
	background:url(http://www.jq22.com/tp/ea25e899-1f81-481c-bf6d-1cedd326b38f.png) repeat-x 0 -20px;
	left:0;
	z-index:1;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

两颗星星实现星星点评效果

1
      若然0
      2017/5/4 11:31:26

      “↑上面代码改变,会自动显示代码结果”: 我改变上面的代码了,可是效果没改变啊

      回复