Question

当我将<!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)

Answer 1

您必须在悬停时声明单位宽度：

.gradBox:hover {
  width: 400px;
}

您在初始css声明中使用像素，因此它也会在悬停时使用。我不知道你的问题是否是一个拼写错误，但是如果没有任何一个单位的情况下它不起作用，所以我不能真正告诉你为什么另一个例子会起作用而另一个不行。

Answer 2

您在悬停部分缺少像素

添加标签时，我的css转换不起作用

2 个答案: