Question

我有一个工作过渡和一个破碎的过渡，据我所知，我在两者上做同样的事情。 main.html中：

<!DOCTYPE HTML>

<html>
  <head>
    <title>Lorem ipsum</title>
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>
    <div id="content">
      <div class="button"><span class="button-content">transformer</span></div>
      <p>Lorem ipsum...</p>
      <p>Lorem ipsum...</p>
    </div>
  </body>
</html>

的main.css：

#content {
    background-color: lightgray;
    transition: width 2s ease, height 2s ease;
}
#content:hover {
    width: 800px;
    height: 400px;
}

.button {
    background-color: gray;
    width: 100px;
    height: 50px;
    border-radius: 10px;
    border: 2px solid #73AD21;
    text-align: center;
    transition: width 2s ease, height 2s ease;
}
.button:hover {
    width: 150px;
    height: 100px;
}
.button-content {
    line-height: 50px;
}

按钮在悬停时很好地转换，但内容div会立即改变大小而不会转换！我不知所措。

Answer 1

这是因为未定义悬停前#content div的高度和宽度。按钮尺寸已定义。

CSS3过渡破了，我做错了什么？

1 个答案: