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

Question

我卡住了：悬停不起作用。我怀疑绝对位置和浮动位置，但没有任何明确的想法。我是 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 {

您的 select 或 &:hover + .box select 是 .box 元素，它们是 .menus 的同级元素，而不是 children。如果你想 select 所有框 children 和 .menus 的全部框 children，或者 &:hover>.box 到 select，你可以使用 &:hover .box直接 .box children.

这是一个 link，其中包含所有 css select 或者将来可能有用的：https://www.w3schools.com/cssref/css_selectors.asp

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

Animation with Sass and hover doesn't work?

css

animation

hover