html - 如何让我所有的星星向左悬停一倾斜?
问题描述
现在,只有我的鼠标倾斜的星星。我希望悬停的星星左侧的所有星星都倾斜。我不确定如何在 css 中执行此操作,或者是否可以使用我当前的设置执行此操作?请帮忙。
.stars {
width: auto;
display: inline-block
}
input.star {
display: none
}
label.star {
float: right;
padding: 5px;
font-size: 20px;
color: #4A148C;
transition: all .2s
}
input.star:checked~label.star:before {
content: '\f005';
color: #FD4;
transition: all .25s
}
input.star-5:checked~label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952
}
input.star-1:checked~label.star:before {
color: #F62
}
label.star:hover {
transform: rotate(-15deg) scale(1.3)
}
label.star:before {
content: '\f006';
font-family: FontAwesome
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="stars" id="star">
<input class="star star-5" id="star-5" type="radio" name="star" value="5" />
<label class="star star-5" for="star-5"></label>
<input class="star star-4" id="star-4" type="radio" name="star" value="4" />
<label class="star star-4" for="star-4"></label>
<input class="star star-3" id="star-3" type="radio" name="star" value="3" />
<label class="star star-3" for="star-3"></label>
<input class="star star-2" id="star-2" type="radio" name="star" value="2" />
<label class="star star-2" for="star-2"></label>
<input class="star star-1" id="star-1" type="radio" name="star" value="1" />
<label class="star star-1" for="star-1"></label>
</div>
解决方案
代替label.star:hover
,您可以将通用同级组合器 ( ~
)用作label.star:hover ~ label.star
:
.stars {
width: auto;
display: inline-block
}
input.star {
display: none
}
label.star {
float: right;
padding: 5px;
font-size: 20px;
color: #4A148C;
transition: all .2s
}
input.star:checked~label.star:before {
content: '\f005';
color: #FD4;
transition: all .25s
}
input.star-5:checked~label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952
}
input.star-1:checked~label.star:before {
color: #F62
}
label.star:hover {
transform: rotate(-15deg) scale(1.3)
}
label.star:hover ~ label.star {
transform: rotate(-15deg) scale(1.3)
}
label.star:before {
content: '\f006';
font-family: FontAwesome
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="stars" id="star">
<input class="star star-5" id="star-5" type="radio" name="star" value="5" />
<label class="star star-5" for="star-5"></label>
<input class="star star-4" id="star-4" type="radio" name="star" value="4" />
<label class="star star-4" for="star-4"></label>
<input class="star star-3" id="star-3" type="radio" name="star" value="3" />
<label class="star star-3" for="star-3"></label>
<input class="star star-2" id="star-2" type="radio" name="star" value="2" />
<label class="star star-2" for="star-2"></label>
<input class="star star-1" id="star-1" type="radio" name="star" value="1" />
<label class="star star-1" for="star-1"></label>
</div>
推荐阅读
- arraylist - Java Random 从数组中生成字符串以防止重复
- javascript - 当 Jest 测试包含 c3 图表的反应组件时,“TypeError:无法读取未定义的属性‘原型’”
- python - 如何获取 scipy.sparse.csr.csr_matrix 的 log2
- reactjs - 使用 axios 从多个页面获取数据
- mysql - 汇总 mariadb 中的分组行
- php - 在循环中回显 file_get_contents
- ios - 无法识别的选择器发送到仅在 iOS 12 上发生的实例
- erlang - 优先处理 Erlang 的消息,也称为选择性接收
- azure - Azure Data Lake Storage Gen1 元数据(就文件夹结构和大小信息而言)到 Power BI
- api - 如何在邮递员中使用用户名和 api 令牌命中 sonarQube api。(承载令牌和用户名密码正在工作 UserName 和 Api 令牌问题)