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

Question

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

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

有没有一种方法只使用CSS来实现这一点(而不是所有那些JS线)？

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

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");
});

.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???*/
}

<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>

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现在得到很好的支持.