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、IE 和 edge。

这是一个 JSFiddle：https://jsfiddle.net/vj12qswz/3/ 所有元素都应该放在一行中。如有必要，调整预览窗口宽度。

Answer 1

如果您使用 javascript 在悬停时添加特定类，则效果很好。

最好也添加“onclick”事件，因为悬停在触摸设备上不起作用。