CSS Breite Übergang und Hover

Question

Ich versuche, eine Diashow wie Menü mit CSS zu implementieren. Es funktioniert gut, außer für den Übergang. Wenn der Übergang verwendet wird, sind die Elemente nicht mehr synchron. Gesamtes Menü verliert die Breite, wenn mehrere Elemente in kurzer Zeit verschoben werden. Alles funktioniert gut, wenn der Übergang entfernt wird.

Gibt es etwas, auf das ich achten muss, wenn ich CSS-Übergänge verwende und gleichzeitig hovere? Ich dachte, ein transition-timing-function: linear; wäre genug, um die Breite synchron zu bekommen. Es scheint, als ob der Übergang beim Ausblendungselement frühzeitig begonnen wird als beim Einblenden des Elements.

Einige technische Hinweise über die Umsetzung:

Es ist eine ul Liste. Menüpunkte werden als li dargestellt. Ausgewählter Menüpunkt hat eine selected. Dieser wird angezeigt, wenn keine Benutzerinteraktion stattfindet. Die anderen sind zusammengebrochen. Wenn ein Element schwebt, wird es geöffnet und alle anderen Elemente werden minimiert. Es sollte einen Übergangseffekt geben, wenn von "Reduziert" zu "Gezeigt" gewechselt wird.

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>

Auslöser das Problem, indem schnell Cursor von links nach rechts. Es tritt zumindest in Firefox und Chrome auf. Safari, IE und Edge nicht getestet.

Hier ist ein JSFiddle: https://jsfiddle.net/vj12qswz/3/ Alle Elemente sollten in einer Zeile passen. Passen Sie bei Bedarf die Breite des Vorschaufensters an.

Answer 1

Funktioniert gut, wenn Sie Javascript verwenden, um eine bestimmte Klasse bei Hover hinzuzufügen.

Wahrscheinlich am besten "onclick" -Ereignis auch hinzufügen, weil Hover nicht auf Touch-Geräten arbeiten wird.