Question

查看下面的代码并运行它，悬停效果将变为绿色，它变成一个实心框。我想要的是灰色条变成绿色，所以它们之间还有一个空间。我怎样才能做到这一点？升值。

＆＃13;

.rating {float:left}
.rating:not(:checked) > input {
    position:absolute;
    left:-9999px;
    clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
    float:right;
    width:9px;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:before {
    content:'\00a0 \00a0 \00a0 ';
    background-color: #c7c5c5;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;	
}

.rating > input:checked ~ label {
    color: #f70;
	
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
   }

.rating:not(:checked) :hover ~ label:before {
    content:'\00a0 \00a0 \00a0 ';
    background-color: #4bce32;
}

.rating:not(:checked) :hover ~ label {
    background-color: #4bce32;
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em     rgba(0,0,0,.5);
}

＆＃13;

<fieldset class="rating">
    <legend>Please rate:</legend>
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
</fieldset>

＆＃13;

Answer 1

这样的事可能适合你：

.rating:not(:checked) > label {
...
padding:0 .1em 0 0;
border-left:.1em solid #fff;
...

https://jsfiddle.net/1wdt1nbc/

如何在这种情况css html php中悬停效果之间留一个空格？

1 个答案: