オブジェクトが親タグから外れないようにホバーオン幅の遷移を制限する方法はありますか？

Question

したがって、質問はタイトルに記載されています。私は、オンホバーで幅を変える赤いオブジェクトを持っています。しかし、それが実行されると、それはto-do-listアプリの長方形全体である中央divの外に出ていることがわかります。私はこれを解決しようとしています。 何が起こっているかのビデオ：https://youtu.be/ELkusRU7Wr4

コード： deleteTask - のlistItemsゴミ箱のアイコンが含まれている赤いスパン - リスト項目そのもの別途（すべての '李'）

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> 

CSS：

#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; 
} 

Answer 1

はリストが含まれている主な要素にラッパーの

#listItem{ 
    overflow: hidden; 
} 

を置くことです。

上記の答えには、translateを使用するとパフォーマンスが向上します。

また、idをアプリで過度に使うのは悪い習慣ですので、idの代わりにクラスを使用して要素をスタイルすることをおすすめします。確認：CSS: #id .class VS .class performance. Which is better?

Answer 2

ラッパーでoverflow: hidden;する必要がありますので、外には表示されません。

widthに移行することは、パフォーマンス上非常に悪いため推奨しません。 要素の幅は、その周りの他の要素に影響を与え、ブラウザはアニメーションのすべてのフレームについてページ全体を「再計算」する必要があります。

代わりにtransformを使用することをお勧めします（例：transform: translateX(-100px);）。

これは、divを-100pxをX軸の元の位置から移動させます。

transform DOMには影響しません。スムーズなCSSアニメーションの詳細については

は、以下を参照してください。 https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29#.7b5ozp8qm

Answer 3

あなたは、その要素の外にあるすべての子どもたちが非表示になりますように#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はページ上に1回のみ存在する必要があるため、ページ上に複数回表示されるIDはクラスでなければなりません。あなたが必要なもの