Question

我有一个简单的待办事项列表应用程序。我希望在width的{{1}}期间，在hovered开启时增加文本字段的3 seconds。

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

我在这里做错了什么？

这里是代码codepen

Answer 1

您必须在输入中添加更改的CSS属性，这些属性会在悬停时更改。

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

输入代码CSS中的代码未命中宽度。

Answer 2

这是因为你的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-->

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

2 个答案: