带有 Sass 和悬停的动画不起作用？

Question

我被困在 :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>

Answer 1

问题出在这里：

.menus {
    cursor: pointer;
    &:hover + .box {

您的选择器&:hover + .box 选择.box 元素，它们是.menus 的兄弟元素，而不是子元素。如果要选择.menus 的所有子框和孙子框，可以使用&:hover .box，或者使用&:hover>.box 直接选择.box 子框。

这里有一个链接，其中包含将来可能有用的所有 css 选择器：https://www.w3schools.com/cssref/css_selectors.asp