0
查看代碼並運行它,我想更改內容'\ 00a0'背景顏色的懸停效果。改變背景顏色懸停效果沒有問題,但不能將內容'\ 00a0'的背景色從灰色更改爲綠色。幫助,欣賞。 如何在這種情況下更改CSS內容懸停效果背景顏色的CSS PHP?
.rating:not(:checked) > input {
position:absolute;
left:-9999px;
clip:rect(0,0,0,0);
}
.rating:not(:checked) > label {
float:right;
width:40px;
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; \t
}
.rating > input:checked ~ label {
color: #f70;
\t
text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) :hover ~ label {
content:'\00a0 \00a0 \00a0 ';
\t
background-color: #4bce32;/*here is what I want to change when user clikc*/
}
.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);
}
<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>
謝謝您的時間。它現在可以改變內容的顏色,但只有個別的,我失去了保持顏色變化的效果。 – conan 2015-03-19 00:26:49
非常感謝。順便說一下,你有辦法在懸停之間放置一個空白空間嗎? – conan 2015-03-19 01:20:51