CSS幅の遷移とホバー

Question

私はCSSのようなメニューのようなスライドショーを実装しようとしています。移行以外は正常に動作しています。遷移が使用される場合、要素はもはや同期していません。短時間で複数の要素が浮かび上がる場合は、メニュー全体の幅が失われます。移行が削除された場合、すべて正常に動作します。

CSSトランジションとホバーを併用する際に気が付かないことはありますか？ transition-timing-function: linear;は、同期して幅を取得するには十分だと思いました。要素のフェージングよりもフェージングアウトの早い段階で遷移が開始されるようです。

実装に関するいくつかのテクニカルノート：

それはulリストです。メニュー項目はliと表示されます。選択したメニュー項目にはselectedがあります。ユーザーの操作がない場合に表示されます。他のものは崩壊しています。要素が跳ね上がった場合、それは開かれ、他の要素はすべて崩壊します。折りたたみから表示に変更するときは、トランジション効果が必要です。

ul { 
 
    list-style: none; 
 
    display: inline-block; 
 
    padding: 0; 
 
    /* 
 
    * remove gaps between inline elements 
 
    * https://css-tricks.com/fighting-the-space-between-inline-block-elements/ 
 
    */ 
 
    font-size: 0; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    /* 
 
    * Transition 
 
    */ 
 
    transition: width 0.5s; 
 
    transition-timing-function: linear; 
 
    width: 50px; 
 
} 
 
ul li:hover, 
 
ul li.selected, 
 
ul:hover li.selected:hover { 
 
    width: 564px; 
 
} 
 
ul:hover li.selected { 
 
    width: 50px; 
 
}

<ul> 
 
    <li> 
 
    <a href="http://www.3ker-ras-group.com/profil.html"> 
 
     <img src="http://www.3ker-ras-group.com/images/m_profil.jpg" alt="Unser Profil"> 
 
    </a> 
 
    </li> 
 
    <li class="selected"> 
 
    <a href="http://www.3ker-ras-group.com/referenzen.html"> 
 
     <img src="http://www.3ker-ras-group.com/images/m_referenzen_der_3ker_ras_group.jpg" alt="Referenzen der 3KER RAS GROUP"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.3ker-ras-group.com/jobs.html"> 
 
     <img src="http://www.3ker-ras-group.com/images/m_hoehenarbeiter_jobs.jpg" alt="Jobs für Höhenarbeiter"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.3ker-ras-group.com/shop-kletterbedarf.html"> 
 
     <img src="http://www.3ker-ras-group.com/images/m_kletterbedarf_shop.jpg" alt="Unser Shop für Kletterbedarf"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="http://www.3ker-ras-group.com/kontakt.html"> 
 
     <img src="http://www.3ker-ras-group.com/images/m_kontakt_zum_unternehmen.jpg" alt="Kontakt aufnehmen"> 
 
    </a> 
 
    </li> 
 
</ul>

トリガー、左から右に高速でカーソルを移動することで問題。 FirefoxとChromeで少なくとも発生します。サファリ、IE、エッジのテストは行っていませんでした。

ここにJSFiddleがあります。https://jsfiddle.net/vj12qswz/3/ すべての要素は1行に収まる必要があります。必要に応じて、プレビューウィンドウの幅を調整します。

Answer 1

javascriptを使用して特定のクラスをホバーに追加するとうまく動作します。

「onclick」イベントを追加するのが最も良いでしょう。タッチデバイスでは動作しないため、