Question

所以我有一些像这样的CSS代码

    .some_class{
        width: 30%;
        height: 120px;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 100px;
        float: left;
        @include boxShadowLevel(2);
        transition: box-shadow 0.4s, transform 0.4s;

        transform: scale(0);

        &:nth-child(odd):hover{
            transform: translate(-3px, -3px) scale(1.1);
            @include boxShadowLevel(3);
        }

        &:nth-child(even):hover{
            transform: translate(3px, -3px) scale(1.1);
            @include boxShadowLevel(3);
        }

        // Some more css here (which is not relevant for the question)

    }

正如你所看到的那样，标准变换是scale（0），那就是因为我用一些js代码onload淡化它

$(elem[i]).css("transform", "scale(1)")

问题是悬停没有任何变化，我怀疑是因为初始变换。

有没有任何解决方案，没有第二个包装div或类似的东西？

Answer 1

我自己找到了解决方案。这是我的SCSS（注意添加的＆＃34;显示＆＃34;）

.some_class{
    width: 30%;
    height: 120px;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 100px;
    float: left;
    @include boxShadowLevel(2);
    transition: box-shadow 0.4s, transform 0.4s;

    transform: scale(0);

    &.show{
        transform: scale(1);
    }

    &:nth-child(odd):hover{
        transform: translate(-3px, -3px) scale(1.1);
        @include boxShadowLevel(3);
    }

    &:nth-child(even):hover{
        transform: translate(3px, -3px) scale(1.1);
        @include boxShadowLevel(3);
    }

    // Some more css here (which is not relevant for the question)

}

然后添加课程＆＃34; show＆＃34;而不是在js代码中手动设置变换：

$(elem[i]).addClass("show")

在悬停时更改转换状态

1 个答案: