如何解决使用Sass和悬停的动画不起作用吗?
我陷入困境:hover无法正常工作。我怀疑绝对位置和浮动位置,但没有明确的主意。我是Sass和CSS动画的初学者。有帮助吗?
.menus {
cursor: pointer;
&:hover >.box {
transform: scale(0) translateX(300px);
.check {
transform: rotate(0deg);
}
}
}
.box {
float: right;
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 100%;
background-color: yellow;
border-radius: 4px;
color: green;
transform: scale(1) translateX(0);
transition: transform 330ms ease-in-out;
.check {
display: block;
float: right;
position: absolute;
right: 30%;
top: 35%;
transform: rotate(-360deg);
transition: transform 500ms ease-in-out;
}
}
<div class="restaurants menus">
<div class="box"><img class="check" src="img/check24.png" alt="#"></div>
<h3>Citrus Squid Carpaccio</h3>
<p>with orange zest</p>
<img class="heart " src="img/heart-30.png" alt="#">
</div>
解决方法
问题出在这里:
.menus {
cursor: pointer;
&:hover + .box {
您的选择器&:hover + .box
选择.box
的同级元素.menus
,而不是子元素。如果要选择&:hover .box
的所有框子代和大子代,则可以使用.menus
,也可以使用&:hover>.box
选择直接的.box
子代。
以下是所有将来使用css选择器的链接:https://www.w3schools.com/cssref/css_selectors.asp
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。