Question

我一直在玩转换效果，并注意到除非我实际将代码放在html页面本身，否则它们无效。

我的转换效果如下：

风格

.test_style:hover {
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transform: scale(1.6);
    -ms-transform: scale(1.6);
    transform: scale(1.6);
}

所以，当我将代码放在style.css中并链接到它时：

<link href="style.css" type="text/css" media="all" rel="stylesheet"/>

这是在我的元素中所以它在开始时加载。它实际上并没有应用效果。

如果我将样式代码直接放在元素中，那么它可以正常工作。

我有什么遗失的吗？

Answer 1

所以，我在当地尝试了这个。

我有两个文件，都在同一个文件夹中：

的test.html
test.css

HTML：

<!DOCTYPE html>
<html>
    <head lang="de">
        <title>Example</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="./test.css">
    </head>
    <body>
        <div class="test_style">

        </div>
    </body>
</html>

CSS：

.test_style {
    width: 50px;
    height: 50px;
    background: red;
    opacity: .3;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.test_style:hover {
    opacity: 1;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transform: scale(1.6);
    -ms-transform: scale(1.6);
    transform: scale(1.6);
}

它的工作就像一个魅力。不知道你做错了什么，但它有效！

置于css文件中时，转换/转换效果不起作用

1 个答案: