五星评级组件：如何摆脱所有JavaScript代码并仅用CSS替换它？

Question

我构建了一个五星级的简单组件（用于排名）。该组件工作正常。我使用JavaScript来保存结果（当用户点击星号时（这里没有显示））。

我遇到的问题是我没有找到正确的方法来模拟mouseover事件（当你将鼠标移过星星并点击之前）。所以我用JavaScript做到了。

是否有正确的方法只使用CSS来实现这一点（而不是所有那些JS行）？

我正在分享我已经做过的事情。

＆＃13;

＆＃13;

document.getElementById('star1').addEventListener('mouseover', function(){
	this.classList.remove("fa-star-o");
	this.classList.add("fa-star");
});
document.getElementById('star1').addEventListener('mouseout', function(){
	this.classList.remove("fa-star");
	this.classList.add("fa-star-o");
});

document.getElementById('star2').addEventListener('mouseover', function(){
	this.classList.remove("fa-star-o");
	this.classList.add("fa-star");
	document.getElementById('star1').classList.remove("fa-star-o");
	document.getElementById('star1').classList.add("fa-star");
});
document.getElementById('star2').addEventListener('mouseout', function(){
	this.classList.remove("fa-star");
	this.classList.add("fa-star-o");
	document.getElementById('star1').classList.remove("fa-star");
	document.getElementById('star1').classList.add("fa-star-o");
});

document.getElementById('star3').addEventListener('mouseover', function(){
	this.classList.remove("fa-star-o");
	this.classList.add("fa-star");
	document.getElementById('star1').classList.remove("fa-star-o");
	document.getElementById('star1').classList.add("fa-star");
	document.getElementById('star2').classList.remove("fa-star-o");
	document.getElementById('star2').classList.add("fa-star");
});
document.getElementById('star3').addEventListener('mouseout', function(){
	this.classList.remove("fa-star");
	this.classList.add("fa-star-o");
	document.getElementById('star1').classList.remove("fa-star");
	document.getElementById('star1').classList.add("fa-star-o");
	document.getElementById('star2').classList.remove("fa-star");
	document.getElementById('star2').classList.add("fa-star-o");
});

document.getElementById('star4').addEventListener('mouseover', function(){
	this.classList.remove("fa-star-o");
	this.classList.add("fa-star");
	document.getElementById('star1').classList.remove("fa-star-o");
	document.getElementById('star1').classList.add("fa-star");
	document.getElementById('star2').classList.remove("fa-star-o");
	document.getElementById('star2').classList.add("fa-star");
	document.getElementById('star3').classList.remove("fa-star-o");
	document.getElementById('star3').classList.add("fa-star");
});
document.getElementById('star4').addEventListener('mouseout', function(){
	this.classList.remove("fa-star");
	this.classList.add("fa-star-o");
	document.getElementById('star1').classList.remove("fa-star");
	document.getElementById('star1').classList.add("fa-star-o");
	document.getElementById('star2').classList.remove("fa-star");
	document.getElementById('star2').classList.add("fa-star-o");
	document.getElementById('star3').classList.remove("fa-star");
	document.getElementById('star3').classList.add("fa-star-o");
});

document.getElementById('star5').addEventListener('mouseover', function(){
	this.classList.remove("fa-star-o");
	this.classList.add("fa-star");
	document.getElementById('star1').classList.remove("fa-star-o");
	document.getElementById('star1').classList.add("fa-star");
	document.getElementById('star2').classList.remove("fa-star-o");
	document.getElementById('star2').classList.add("fa-star");
	document.getElementById('star3').classList.remove("fa-star-o");
	document.getElementById('star3').classList.add("fa-star");
	document.getElementById('star4').classList.remove("fa-star-o");
	document.getElementById('star4').classList.add("fa-star");
});
document.getElementById('star5').addEventListener('mouseout', function(){
	this.classList.remove("fa-star");
	this.classList.add("fa-star-o");
	document.getElementById('star1').classList.remove("fa-star");
	document.getElementById('star1').classList.add("fa-star-o");
	document.getElementById('star2').classList.remove("fa-star");
	document.getElementById('star2').classList.add("fa-star-o");
	document.getElementById('star3').classList.remove("fa-star");
	document.getElementById('star3').classList.add("fa-star-o");
	document.getElementById('star4').classList.remove("fa-star");
	document.getElementById('star4').classList.add("fa-star-o");
});

＆＃13;

.content > span > i{
    font-size: 50px;
    margin-right: 10px;
    color: #f0d124;
	cursor: pointer;
}
#star1:hover #star1{
	/*an example: I don't know what to do here???*/
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="content">
	<span><i id="star1" class="fa fa-star-o"></i></span>
	<span><i id="star2" class="fa fa-star-o"></i></span>
	<span><i id="star3" class="fa fa-star-o"></i></span>
	<span><i id="star4" class="fa fa-star-o"></i></span>
	<span><i id="star5" class="fa fa-star-o"></i></span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下是使用FontAwesome进行此操作的一种方法：

body {
  font-size: 44px;
}

.content {
  width: 200px;
  display: flex;
  flex-direction: row-reverse;
}

span:hover i:before,
span:hover~span i:before {
  content: "\f005";
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="content">
  <span><i id="star1" class="fa fa-star-o"></i></span>
  <span><i id="star2" class="fa fa-star-o"></i></span>
  <span><i id="star3" class="fa fa-star-o"></i></span>
  <span><i id="star4" class="fa fa-star-o"></i></span>
  <span><i id="star5" class="fa fa-star-o"></i></span>
</div>

它有一些需要考虑的“限制”。它需要flexbox来反转元素渲染顺序，以便“〜” - 选择器按预期工作。因此，在保存结果时生成javascript时请记住这一点。

Flexbox现在得到很好的支持。

Answer 2

此演示使用单选按钮进行“粘贴”功能。单击将保持选定的星形突出显示，但它只会持续到页面重新加载为止。 注意：如果有部分星星选择，我们可以将鼠标悬停在剩余的未选星上，悬停效果仍然可以正常工作。

详情在演示

中发表

演示

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <style>
    body {
      color: #FFB300;
      background: #000;
      font: 700 16px/1.5 Verdana;
    }
    
    .rating {
      font-size: 0;
    }
    
    .set {
      display: inline-block;
      font-size: 1rem;
      border: 1px solid #FC0;
    }
    
    .set:after {
      content: "";
      display: table;
      clear: both;
    }
    
    .star {
      float: right;
      padding-left: 2px;
      cursor: pointer;
      color: #FFB300;
    }
    
    .star:last-child {
      padding-left: 0;
    }
    
    .rad {
      display: none;
    }
    /* 1. hover over a label.star directly and display
    ||    the full gold star in the ::before pseudo
    ||    element.
    */
    /* 2. hover over a label.star and display it and all
    ||    other label.star before it as a full gold star
    */
    /* 3. check a label.star and display it and all other
    ||    label.star before it as a full gold star.
    ||    Full persistent empty stars are possible because
    ||    of the :checked pseudo-selector
    */
    .star:hover:before,
    .star:hover~.star:before,
    .rad:checked~.star:before {
      content: "\f005";
    }
  </style>
</head>

<body>
  <section id="rating">
    <fieldset class='set'>
      <legend>Rate It</legend>
      <input id="rad5" class="rad" name="rad" type="radio">
      <label for="rad5" class="star fa fa-star-o fa-lg"></label>
      <input id="rad4" class="rad" name="rad" type="radio">
      <label for="rad4" class="star fa fa-star-o fa-lg"></label>
      <input id="rad3" class="rad" name="rad" type="radio">
      <label for="rad3" class="star fa fa-star-o fa-lg"></label>
      <input id="rad2" class="rad" name="rad" type="radio">
      <label for="rad2" class="star fa fa-star-o fa-lg"></label>
      <input id="rad1" class="rad" name="rad" type="radio">
      <label for="rad1" class="star fa fa-star-o fa-lg"></label>
    </fieldset>
  </section>
</body>

</html>

Answer 3

这将完成所有工作。看上去很“脏”，但很有效。

.content > span > i,.content > span > span{
    font-size: 50px;
    margin-right: 10px;
    color: #f0d124;
	cursor: pointer;
}

span > i:before{
  content:"\f006"
}

.content > span{
  position: relative;
  width: 56px;
  display: inline-block;
}

span > span{
  position: absolute;
}

span > i{
  position: absolute;
  z-index:1
}

.back{
  z-index:0;
}

.left_1{
  left:-60px;
}

.left_2{
  left:calc(-60px*2);
}

.left_3{
  left:calc(-60px*3);
}

.left_4{
  left:calc(-60px*4);
}

span:hover > i:before, span:hover > span:before {
   content:"\f005"
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="content"> 
    <span><i id="star1" class="fa fa-star-o"></i></span>
    <span>
      <span class="fa fa-star-o back left_1"></span>
      <i id="star2" class="fa fa-star-o"></i>
    </span>
    <span>
      <span class="fa fa-star-o back left_2"></span>
      <span class="fa fa-star-o back left_1"></span>
      <i id="star3" class="fa fa-star-o"></i>
    </span>
    <span>
      <span class="fa fa-star-o back left_3"></span>
      <span class="fa fa-star-o back left_2"></span>
      <span class="fa fa-star-o back left_1"></span>
      <i id="star4" class="fa fa-star-o"></i>
    </span>
    <span>
      <span class="fa fa-star-o back left_4"></span>
      <span class="fa fa-star-o back left_3"></span>
      <span class="fa fa-star-o back left_2"></span>
      <span class="fa fa-star-o back left_1"></span>
      <i id="star5" class="fa fa-star-o"></i>
    </span>  
</div>