Html 如何限制悬停宽度转换，使对象不脱离父标记？

因此，问题列在标题中。我有一个红色的物体在悬停时改变了它的宽度。但是当它这样做的时候，你可以看到它在中央div之外，这个div是待办事项列表应用程序的整个矩形。我正在努力解决这个问题。 正在进行的视频：

代码： deleteTask-包含垃圾箱图标的红色范围 listItems-单独列出项目本身（每个'li'）

HTML:

<div id="workingField">
    <h1 id="toDoListHeader">TO-DO LIST<i class="fa fa-pencil" aria-hidden="true" id="hideInputField"></i></h1>
    <input type="text" id="addNewTask" placeholder="Add New Task">
    <ul id="tasks">
        <li id="listItem">Task1<span id="deleteTask"><i class="fa fa-trash" aria-hidden="true"></i></span></li>
        <li id="listItem">Task2<span id="deleteTask"><i class="fa fa-trash" aria-hidden="true"></i></span></li>
        <li id="listItem">Task3<span id="deleteTask"><i class="fa fa-trash" aria-hidden="true"></i></span></li>
    </ul>
</div>

#deleteTask
{
    background-color: #f26363;
    box-sizing: initial;
    clear: left;
    color: white;
    cursor: pointer;
    float: right;
    display: inline-block;
    height: 100%;
    margin: -3px -15px 0px -3px;
    opacity: 0;
    padding: 3px 0px 0px 2px;
    text-align: left;
    vertical-align: 0px;
    width: 0px;
}

#listItem
{
    background-color: white;
    color: #595959;
    height: 30px;
    line-height: 25px;
    padding: 3px 15px 0px 15px;
    vertical-align: 5px;
}

#listItem:hover #deleteTask
{
    opacity: 1;
    text-align: center;
    -webkit-transition: 2s linear;
    -moz-transition: 2s linear;
    -o-transition: 2s linear;
    transition: 2s linear;
    width: 35px;
}

---

您需要

溢出：隐藏，使其外部的内容不可见

作为旁注-不建议在
宽度上进行转换，因为这对性能非常不利。
元素的宽度会影响其周围的其他元素，因此浏览器必须为动画的每一帧“重新计算”整个页面

建议改用
transform
，例如：
transform:translateX（-100px）

这将使div从其在X轴上的原始位置移动-100px

transform
不会影响DOM

有关平滑css动画的更多信息，请参见：
您希望应用
#listItem{overflow:hidden；}
以便隐藏该元素之外的所有子元素

#listItem {
  background-color: white;
  color: #595959;
  height: 30px;
  line-height: 25px;
  padding: 3px 15px 0px 15px;
  vertical-align: 5px;
  overflow: hidden;
}

但值得注意的是，您在页面上多次使用ID。一个ID应该只在页面上出现一次，因此在页面上出现多次的ID应该是类
 你需要的是

#listItem{
    overflow: hidden;
}

在包含列表的主元素的包装器上

我同意上面的答案，即使用translate对性能更好

此外，在应用程序中过度使用id是一种不好的做法，因此我建议使用类而不是id来设置元素的样式。检查：