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”事件，因为悬停不会在触控设备上运行。

CSS宽度过渡和悬停

1 个答案: