作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我构建了一个五星级的简单组件(用于排名)。该组件工作正常。我使用 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>
最佳答案
这是使用您正在使用的 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现在得到了很好的支持。
关于css - 五星级组件 : How to get rid of all JavaScript code and replace it with only CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44969797/
我是一名优秀的程序员,十分优秀!