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中。没有测试过Safari，即和Edge。

这是一个jsfiddle：https：//jsfiddle.net/vj12qswz/3/所有元素都应适合一行。必要时调整预览窗口宽度。

Answer 1

如果您使用JavaScript在悬停中添加特定类，则可以正常工作。

最好也添加" onclick"事件，因为悬停不会在触摸设备上工作。