添加标签时我的 css 过渡不起作用<html>

当我将<!DOCTYPE html>添加到文档顶部时，此转换不再有效。为什么？

这有效（在Chrome和Microsoft Edge中）：

<html>
<head>
    <title></title>
    <style type="text/css">
        .container{
            width: 400px;
            margin-left: auto;
            margin-right: auto;
            background-color: #9FC;
        }
        .gradBox {
            width: 300px;
            height: 100px;
            margin-right: auto;
            margin-left: auto;
            margin-top: 20px;
            margin-bottom: 20px;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            -webkit-transition: width 1s;
            transition: width 1s;
        }
        .gradBox:hover {
            width: 400;
        }
        #grad1 {
            background: linear-gradient(to right, #F00 1%, #FF0 25%, #0F0 50%, #0FF 75%, #00F 100%)
        }
    </style>
</head>
<body>
<div class="container">
    <div class="gradBox" id="grad1">    
    </div>
</div>
</body>
</html>

这在以下情况下都不起作用：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    ... (the rest of the markup is identical)

您必须在

悬停时在宽度上声明单位：

.gradBox:hover {
  width: 400px;
}

您在初始 css 声明中使用了像素，因此它也将在悬停时使用。我不知道这是您问题中的错字还是在哪里，但是在这两种情况下，如果没有该单元，它都不起作用，所以我无法真正告诉您为什么另一个示例会起作用而另一个示例不起作用。

悬停部分中缺少像素

相关内容

最新更新

热门标签：