Question

我想创建一些动画菜单，您可以将鼠标悬停在图像上并查看说明，但出现了一些问题。

动画在使用初始值时立即进行;
位于图片下方的起始文字处，而不是在右侧侧。

有我的代码：

body{
  text-align:center;
}
div{
  display:inline-block;
  overflow:hidden;
  width:80px;
  height:80px;
  transition:0.5s;
  font-size:20px;
}
div:hover{
  width:initial;
  overflow:visible;
  transition:2s;
  background-color:black;
  color:white;
}
img{
  vertical-align:middle;
}

<body>
  <div>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
  </div>
  <div>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
  </div>
  <div>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
  </div>
</body>

Answer 1

initial就像auto ...你无法过渡到它。

您可以改用max-width。

另外。请注意，overflow无法转换，因此您也会遇到此问题。

＆＃13;

body{
  text-align:center;
}
div{
  display:inline-block;
  overflow:hidden;
  max-width:80px;
  height:80px;
  transition:0.5s;
  font-size:20px;
}
div:hover{
  max-width:100%;
  overflow:visible;
  transition:2s;
  background-color:black;
  color:white;
}
img{
  vertical-align:middle;
}

＆＃13;

<body>
  <div>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
  </div>
  <div>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
  </div>
  <div>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
  </div>
</body>

＆＃13;

过渡属性在使用初始值时起作用

1 个答案: