怎么 我沒有再降層次 他也可以往回 [熄滅] 呀？
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <title>星級評分——第四種方法</title>
? ? <style type="text/css" media="screen">
? ? ? ? .rating{
? ? ? ? ? ? width: 150px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? background: url(images/rating4/rating.png) repeat-x;
? ? ? ? ? ? margin: 150px auto;
? ? ? ? ? ? position: relative;
? ? ? ? }
? ? ? ? .rating:hover .rating-item{
? ? ? ? ? ? background: none;
? ? ? ? }
? ? ? ? .rating-item{
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? z-index: 3;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 0;
? ? ? ? }
? ? ? ? .rating-item-1{
? ? ? ? ? ? left: 0;
? ? ? ? }
? ? ? ? .rating-item-2{
? ? ? ? ? ? left: 30px;
? ? ? ? }
? ? ? ? .rating-item-3{
? ? ? ? ? ? left: 60px;
? ? ? ? }
? ? ? ? .rating-item-4{
? ? ? ? ? ? left: 90px;
? ? ? ? }
? ? ? ? .rating-item-5{
? ? ? ? ? ? left: 120px;
? ? ? ? }
? ? ? ? .rating-item:hover{
? ? ? ? ? ? background:url(images/rating4/rating.png) repeat-x 0 -30px!important;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? z-index: 2;
? ? ? ? }
? ? ? ? .rating input{
? ? ? ? ? ? display: none;
? ? ? ? }
? ? ? ? input:checked + .rating-item{
? ? ? ? ? ? background:url(images/rating4/rating.png) repeat-x 0 -30px;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? z-index: 1;
? ? ? ? }
? ? ? ? .rating-item-1:hover,input:checked + .rating-item-1{
? ? ? ? ? ? width:30px;
? ? ? ? }
? ? ? ? .rating-item-2:hover,input:checked + .rating-item-2{
? ? ? ? ? ? width: 60px;
? ? ? ? }
? ? ? ? .rating-item-3:hover,input:checked + .rating-item-3{
? ? ? ? ? ? width:90px;
? ? ? ? }
? ? ? ? .rating-item-4:hover,input:checked + .rating-item-4{
? ? ? ? ? ? width: 120px;
? ? ? ? }
? ? ? ? .rating-item-5:hover,input:checked + .rating-item-5{
? ? ? ? ? ? width: 150px;
? ? ? ? }
? ? ? ? .rating-item label{
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <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="1" />
? ? ? ? <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="1" />
? ? ? ? <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="1" />
? ? ? ? <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="1" />
? ? ? ? <a href="javascript:;" class="rating-item rating-item-5" title="很好"><label for="rating-5"></label></a>
? ? </div>
</body>
</html>
2018-02-06
?.rating-item:hover{
? ? ? ? ? ? background:url(images/rating4/rating.png) repeat-x 0 -30px!important;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? z-index: 2;
? ? ? ? }
我也是，我覺得是這里 .rating-item:hover移動到了已經(jīng)把第三可改為z-index:2了，而選中的那顆在z-index:1
2018-01-24
我的也可以