如何在这种情况下为星级写CSS？

陷入半星评级问题CSS。我从http://codepen.io/mrk1989/pen/mLeHJ 如何在这种情况下为星级写CSS？

我对明星的表现HTML结构就是这样

<ul class="rateChange"> 
    <li> 
    <input type="radio" id="rating10" name="rating" value="10" /> 
    <label for="rating10" title="5 stars"></label> 
    <input type="radio" id="rating9" name="rating" value="9" /> 
    <label class="half" for="rating9" title="4 1/2 stars"></label> 
    </li> 
    <li> 
    <input type="radio" id="rating8" name="rating" value="8" /> 
    <label for="rating8" title="4 stars"></label> 
    <input type="radio" id="rating7" name="rating" value="7" /> 
    <label class="half" for="rating7" title="3 1/2 stars"></label> 
    </li> 
    <li> 
    <input type="radio" id="rating6" name="rating" value="6" /> 
    <label for="rating6" title="3 stars"></label> 
    <input type="radio" id="rating5" name="rating" value="5" /> 
    <label class="half" for="rating5" title="2 1/2 stars"></label> 
    </li> 
    <li> 
    <input type="radio" id="rating4" name="rating" value="4" /> 
    <label for="rating4" title="2 stars"></label> 
    <input type="radio" id="rating3" name="rating" value="3" /> 
    <label class="half" for="rating3" title="1 1/2 stars"></label> 
    </li> 
    <li> 
    <input type="radio" id="rating2" name="rating" value="2" /> 
    <label for="rating2" title="1 star"></label> 
    <input type="radio" id="rating1" name="rating" value="1" /> 
    <label class="half" for="rating1" title="1/2 star"></label> 
    </li> 
</ul>

，并在我的情况下，星星就在UL李标签的参考，我怎样才能改变我的CSS让所有的CSS功能，这是在上面的链接中给出（如点击所有前面的和当前的星形是ON和悬停所有星形的前一个和当前的开始显示悬停效果）。

这是jsfiddle链接，我正在做些什么https://jsfiddle.net/ae0ypksv/ 没有达到完整的功能。

帮助真的很感激.. !!感谢

来源

2016-07-01 Kinny

你有所有的代码，你想要什么？ –

@Evan Trimboli是的我有一个代码，问题是，星星是通过ng-repeat生成的，我尝试了很多来调整css，但是我不太擅长css来根据这个进行调整。 – Kinny

你必须把所有的输入/标签一个<li>里面像this

<h1>Half Star Rating Change Senirow</h1> 

<ul class="rateChange"> 
    <li> 
    <input type="radio" id="rating10" name="rating" value="10" /> 
    <label for="rating10" title="5 stars"></label> 
    <input type="radio" id="rating9" name="rating" value="9" /> 
    <label class="half" for="rating9" title="4 1/2 stars"></label> 

    <input type="radio" id="rating8" name="rating" value="8" /> 
    <label for="rating8" title="4 stars"></label> 
    <input type="radio" id="rating7" name="rating" value="7" /> 
    <label class="half" for="rating7" title="3 1/2 stars"></label> 

    <input type="radio" id="rating6" name="rating" value="6" /> 
    <label for="rating6" title="3 stars"></label> 
    <input type="radio" id="rating5" name="rating" value="5" /> 
    <label class="half" for="rating5" title="2 1/2 stars"></label> 

    <input type="radio" id="rating4" name="rating" value="4" /> 
    <label for="rating4" title="2 stars"></label> 
    <input type="radio" id="rating3" name="rating" value="3" /> 
    <label class="half" for="rating3" title="1 1/2 stars"></label> 

    <input type="radio" id="rating2" name="rating" value="2" /> 
    <label for="rating2" title="1 star"></label> 
    <input type="radio" id="rating1" name="rating" value="1" /> 
    <label class="half" for="rating1" title="1/2 star"></label> 
    </li> 
</ul>

来源

2016-07-01 05:40:38

星星（输入和标签）通过ng-repeat生成，即基于用户通过的内容。所以所有的输入和标签都在li下，所以我如何使用css sudeo类来实现这个功能。 – Kinny

对不起，我尝试了很多，但仍然没有成功。 –

这

的解决方案，我已经解决了它只是检查...

body { 
 
    margin: 5%; 
 
    text-align: center; 
 
    background: aliceblue; 
 
    color: darkred; 
 
} 
 
h1 { 
 
    font-size: 2em; 
 
    margin-bottom: .5rem; 
 
} 
 

 
/* Ratings widget */ 
 
.rate { 
 
    display: inline-block; 
 
    border: 0; 
 
} 
 
/* Hide radio */ 
 
.rate > input { 
 
    display: none; 
 
} 
 
/* Order correctly by floating highest to the right */ 
 
.rate > label { 
 
    float: right; 
 
} 
 
/* The star of the show */ 
 
.rate > label:before { 
 
    display: inline-block; 
 
    font-size: 50px; 
 
    padding: .3rem .2rem; 
 
    margin: 0; 
 
    cursor: pointer; 
 
    font-family: FontAwesome; 
 
    content: '\2605'; /* full star */ 
 
} 
 

 
/* Zero stars rating */ 
 
.rate > label:last-child:before { 
 
    content: '\2605' ; /* empty star outline */ 
 
} 
 

 
input:checked ~ label, /* color current and previous stars on checked */ 
 
label:hover, label:hover ~ label { color: #73B100; } /* color previous stars on hover */ 
 

 
/* Hover highlights */ 
 
input:checked + label:hover, input:checked ~ label:hover, /* highlight current and previous stars */ 
 
input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */ 
 
label:hover ~ input:checked ~ label /* highlight previous selected stars */ { color: #A6E72D; }

<html> 
 
<head> 
 
<title>Rating</title> 
 
<link type="text/css" href="style.css" rel="stylesheet"> 
 

 
</head> 
 
<body> 
 
<h1>Star Rating By Md.Sabbirul Islam</h1> 
 

 

 
<fieldset class="rate"> 
 
    <input type="radio" id="rating10" name="rating" value="10" /><label for="rating10" title="5 stars"></label> 
 
    
 
    <input type="radio" id="rating8" name="rating" value="8" /><label for="rating8" title="4 stars"></label> 
 

 
    <input type="radio" id="rating6" name="rating" value="6" /><label for="rating6" title="3 stars"></label> 
 

 
    <input type="radio" id="rating4" name="rating" value="4" /><label for="rating4" title="2 stars"></label> 
 

 
    <input type="radio" id="rating2" name="rating" value="2" /><label for="rating2" title="1 star"></label> 
 

 
    <input type="radio" id="rating0" name="rating" value="0" /><label for="rating0" title="No star"></label> 
 
</fieldset> 
 
</body> 
 
</html>

来源

2016-07-01 09:13:15

嗨...这工作已经@ MD。 Sabbirul伊斯兰教，检查我的jsfiddle [https://jsfiddle.net/ae0ypksv/]（https://jsfiddle.net/ae0ypksv/）所有输入和标签都在li标签下。我如何为这种情况编写我的CSS。 – Kinny

如何在这种情况下为星级写CSS？

回答

相关问题