Question

下面的代码笔项目由一个纯CSS星级评定界面组成。 https://codepen.io/yaworek/pen/JJpEaZ

以下是css部分：

/***
 *  Simple Pure CSS Star Rating Widget Bootstrap 4 
 * 
 *  www.TheMastercut.co
 *  
 ***/

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/* Styling h1 and links
––––––––––––––––––––––––––––––––– */
h1[alt="Simple"] {color: white;}
a[href], a[href]:hover {color: grey; font-size: 0.5em; text-decoration: none}

.starrating > input {display: none;}  /* Remove radio buttons */

.starrating > label:before { 
  content: "\f005"; /* Star */
  margin: 2px;
  font-size: 2em;
  font-family: FontAwesome;
  display: inline-block; 
  text-shadow: 0px 0px 3px #000;
}

.starrating > label
{
  color: #FFFFFF; /* Start color when not clicked */
}

.starrating > input:checked ~ label
{ color: #ffca08 ; } /* Set yellow color when star checked */

.starrating > input:hover ~ label
{ color: #ffca08 ;  } /* Set yellow color when star hover */

它使用单选按钮和CSS显示评级。我想为此添加其他评级集。我想添加更多的评分集，例如5本书的5个评分集。现在的问题是，css实现会重置一组的选定评级，而为另一组选择评级。

以下是我添加的其他评级集的代码笔链接。问题是当我选择第二组的评分时，第一组的评分将被删除。 https://codepen.io/brainyprb/pen/BvoqLE

仅使用CSS可以解决此问题吗？还是我必须为此使用javascript / jquery？

Answer 1

为每组星星使用不同的名称，如下面的img所示例如

<input type="radio" id="star5" name="rating1" value="5" /><label for="star5" title="5 star">5</label>
        <input type="radio" id="star4" name="rating1" value="4" /><label for="star4" title="4 star">4</label>
.................
<input type="radio" id="stare" name="rating" value="5" /><label for="stare" title="5 star">5</label>
        <input type="radio" id="stard" name="rating" value="4" /><label for="stard" title="4 star">4</label>
......................

demo

Answer 2

html面如果您将每个div放到不同的位置，它就会起作用！

使CSS星级成为动态

2 个答案: