输入宽度上的过渡属性不起作用

Question

我有一个简单的待办事项列表应用程序。我想在3 seconds过程中hovered打开时增加文本字段的width。

我已经使用了transition属性，但它无法正常工作。问题是当鼠标指针悬停在文本字段上时，width会立即增加，而不是在3 seconds过程中增加。

我在这里做错了什么？

这是代码笔

Answer 1

这是因为你的input does not have width property in default state its auto.

过渡将不起作用auto to some value.

只需将width属性添加到input即可。 它将起作用。

这是工作代码。

.main-container {
  border: 1px solid #000;
  width: 45%;
  text-align: center;
}
input {
  width: 120px;
  padding: 8px;
  border-radius: 7px;
  transition: width 3s;
  border: 2px solid #222;
}
input:hover {
  border: 2px solid green;
  width: 300px;
}

<div class="main-container">
  <h1>To-Do List</h1>
  <input type="text" id="input-field" placeholder="enter new item" />
  <button id="btn-add-item">Add Item</button>
  <button id="btn-remove-item">Remove Last Item</button>
  <ul></ul>
</div>
<!--end of main container-->

Answer 2

您必须在输入中添加更改的 CSS 属性，该属性将在悬停时像这样更改。

input{
     width: 100px;
     transition: width 3s ease-out;
}
input:hover{
    width: 300px;
}

您的代码缺少输入标签 CSS 中的宽度。