;請問我的為什么劃過星星之后點擊沒反應(yīng)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第四種實現(xiàn)方法</title>
<style type="text/css">
.rating{
position: relative;
width: 121px;
height: 24px;
background: url(rating.png.png) repeat-x;
margin:100px auto;
overflow: hidden;
}
.rating:hover.rating-item{
background-image: none;
}?
.rating-item:hover{
background: url(rating.png.png) repeat-x 0 -24p!important;
}?
.rating-item{
position: absolute;
top: 0;
z-index: 3;
width: 24px;
height: 24px;
}
.rating-item-1{
left: 0;
}
.rating-item-2{
left: 24px;
}
.rating-item-3{
left: 48px;
}
.rating-item-4{
left: 72px;
}
.rating-item-5{
left: 96px;
}
.rating-item:hover{
left: 0;
z-index: 2;
background: url(rating.png.png) repeat-x 0 -24px;
}
.rating input{
position: absolute;
? left: 0;
? top:-20px;
}
input:checked + .rating-item{
left: 0;
z-index: 1;
? ?background: url(rating.png.png) repeat-x 0 -24px;
}
input:checked .rating-item ~ + .rating-item:hover{
z-index: 0;
}
.rating-item-1:hover,#rating-1:checked+.rating-item{
width: 24px;
}
.rating-item-2:hover,#rating-2:checked+.rating-item{
width: 48px;
}
.rating-item-3:hover,#rating-3:checked+.rating-item{
width: 72px;
}
.rating-item-4:hover,#rating-4:checked+.rating-item{
width: 96px;
}
.rating-item-5:hover,#rating-5:checked+.rating-item{
width: 120px;
}
.rating-item lable{
display: inline-block;
width: 100%;
height: 100%;
cursor: pointer;
}
</style>
</head>
<body>
<from action=" ">
<div class="rating">
<input type="radio" name="rating" id="rating-1" value="1">
<a href="javascript:;" class="rating-item rating-item-1" title="很不好"><label for="rating-1"></label></a>
<input type="radio" name="rating" id="rating-2" ?value="2">
<a href="javascript:;" class="rating-item rating-item-2" title="不好"><label for="rating-2"></label></a>
<input type="radio" name="rating" id="rating-3" checked="checked" value="3">
<a href="javascript:;" class="rating-item rating-item-3" title="一般"><label for="rating-3"></label></a>
<input type="radio" name="rating" id="rating-4" value="4">
<a href="javascript:;" class="rating-item rating-item-4" title="好"><label for="rating-4"></label></a>
<input type="radio" name="rating" id="rating-5" value="5">
<a href="javascript:;" class="rating-item rating-item-5" title="很好"><label for="rating-5"></label></a>
</div>
<input type="submit" value="提交"/>
</from>
</body>
</html>
2018-06-04
左看右看沒看出哪里不對，要不試試我的代碼：
<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="utf-8" />
? ? <title>星級評分之第四種實現(xiàn)方式</title>
? ? <style>
? ? ? .rating {
? ? ? ? position: relative;
? ? ? ? width: 300px;
? ? ? ? height: 56px;
? ? ? ? background: url(img/twoStar.jpg) repeat-x;
? ? ? ? margin: 100px auto;
? ? ? }
? ? ? .rating:hover .rating-item {
? ? ? ? background-image: none;
? ? ? }
? ? ? .rating-item {
? ? ? ? position: absolute;
? ? ? ? top: 0;
? ? ? ? z-index: 3;
? ? ? ? width: 70px;
? ? ? ? height: 56px;
? ? ? }
? ? ? .rating-item-1 {
? ? ? ? left: 0;
? ? ? }
? ? ? .rating-item-2 {
? ? ? ? left: 56px;
? ? ? }
? ? ? .rating-item-3 {
? ? ? ? left: 112px;
? ? ? }
? ? ? .rating-item-4 {
? ? ? ? left: 168px;
? ? ? }
? ? ? .rating-item-5 {
? ? ? ? left: 224px;
? ? ? }
? ? ? .rating-item:hover {
? ? ? ? left: 0;
? ? ? ? z-index: 2;
? ? ? ? background: url(img/twoStar.jpg) repeat-x 0 -56px !important;
? ? ? }
? ? ? .rating input {
? ? ? ? opacity: 0;
? ? ? }
? ? ? input:checked + .rating-item {
? ? ? ? left: 0;
? ? ? ? z-index: 1;
? ? ? ? background: url(img/twoStar.jpg) repeat-x 0 -56px;
? ? ? }
? ? ? input:checked + .rating-item ~ .rating-item {
? ? ? ? z-index: 0;
? ? ? }
? ? ? .rating-item-1:hover, #rating-1:checked + .rating-item {
? ? ? ? width: 56px;
? ? ? }
? ? ? .rating-item-2:hover, #rating-2:checked + .rating-item {
? ? ? ? width: 112px;
? ? ? }
? ? ? .rating-item-3:hover, #rating-3:checked + .rating-item {
? ? ? ? width: 170px;
? ? ? }
? ? ? .rating-item-4:hover, #rating-4:checked + .rating-item {
? ? ? ? width: 235px;
? ? ? }
? ? ? .rating-item-5:hover, #rating-5:checked + .rating-item {
? ? ? ? width: 300px;
? ? ? }
? ? ? .rating-item label {
? ? ? ? display: inline-block;
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? ? ? cursor: pointer;
? ? ? }
? ? </style>
? </head>
? <body>
? ? <form>
? ? ? <div class="rating">
? ? ? ? <input type="radio" name="rating" id="rating-1" value="1" />
? ? ? ? <a href="javascript:;" class="rating-item rating-item-1" title="很不好">
? ? ? ? ? <label for="rating-1"></label>
? ? ? ? </a>
? ? ? ? <input type="radio" name="rating" id="rating-2" value="2" checked="checked" />
? ? ? ? <a href="javascript:;" class="rating-item rating-item-2" title="不好">
? ? ? ? ? <label for="rating-2"></label>
? ? ? ? </a>
? ? ? ? <input type="radio" name="rating" id="rating-3" value="3" />
? ? ? ? <a href="javascript:;" class="rating-item rating-item-3" title="一般">
? ? ? ? ? <label for="rating-3"></label>
? ? ? ? </a>
? ? ? ? <input type="radio" name="rating" id="rating-4" value="4" />
? ? ? ? <a href="javascript:;" class="rating-item rating-item-4" title="好">
? ? ? ? ? <label for="rating-4"></label>
? ? ? ? </a>
? ? ? ? <input type="radio" name="rating" id="rating-5" value="5" />
? ? ? ? <a href="javascript:;" class="rating-item rating-item-5" title="很好">
? ? ? ? ? <label for="rating-5"></label>
? ? ? ? </a>
? ? ? </div>
? ? ? <input type="submit" value="提交" />
? ? </form>
? </body>
</html>