Animation with Sass and hover doesn't work? - css

Question

I'm stuck on :hover doesn't work. I suspect the absolute and float position but don't have any clear idea. I'm a beginner user of Sass and the css animation. Any help ?
.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>

Answer 1

The problem lies here :
.menus {
cursor: pointer;
&:hover + .box {
Your selector &:hover + .box selects the .box elements that are siblings of .menus, and not children. You can use &:hover .box if you want to select all boxes children and grand children of .menus, or &:hover>.box to select direct .box children.
Here's a link with all the css selector that might be useful in the future: https://www.w3schools.com/cssref/css_selectors.asp