在纯 css 的新悬停处结束运行过渡

Question

我正在尝试结束（覆盖）纯 css 中的运行转换。 css-试图覆盖的代码不起作用；它不仅被忽略而且我无法解释这种行为。

下面是一个示例代码，每个代码有 3 个 link，后跟 1 个 div。之后又添加了 3 个 div 只是为了测试。

div {
  background-color: white;
  width: 50px;
  transition: all;
  transition-delay: 1s;
}
a:hover ~ div {
  width: 50px;
  color: red;
}
a:hover + div {
  width: 100px;
  transition-delay: 0s;
}

<a>link 1</a>
<div>text 1</div>
<a>link 2</a>
<div>tekst 2</div>
<a>link 3</a>
<div>tekst 3</div>
<div>tekst 4</div>
<div>tekst 5</div>
<div>tekst 6</div>

悬停在 link 上时，仅由于 [=18]，第一个 div 的宽度发生了变化=] 选择器.
transition-delay 使悬停额外保持 1 秒。

现在的问题是，当出现新的悬停时，我希望所有以下框上的所有悬停效果都终止。把它想象成一个菜单；当悬停在一个新的菜单点上时，我希望关闭所有其他子菜单，只打开当前的子菜单。

希望通过~选择器让div后面的全部恢复正常宽度，然后a:hover + div可以展开恰到好处的宽度。但这不起作用。

添加了 color: red 文本着色以供测试。因为经过一些测试，我发现问题不是 ~ 选择器或 css-order，而是 transition。删除所有过渡线，结果完全符合预期，没有延迟。你可以在这里看到结果：

Here is a fiddle 上面的非工作代码，和
here is a fiddle 删除了转换代码行，一切正常（但缺少延迟）。

如果没有过渡代码行，div 之后的所有代码行都会变成红色文本 - 底部的三个额外代码行也是如此。但是 with 转换代码行，它们是 not 红色 - 实际上只有 hovered 一个是红色的，这意味着代码行没有被完全忽略，但不再作为 ~ 选择器工作。

结论是转换干扰。我显然无法停止运行转换，并且干扰代码块的行为出乎意料且未被忽略。

导致这种情况的转换代码行的行为到底是什么？

对于那些好奇的人，我可以告诉你，实际上在项目中我正在处理悬停之前的原始宽度为 0。因此这个解决方案将起作用：

a:hover ~ div {
  display:none;
}

我没有尝试重置宽度，而是删除了宽度，一切都很好。我宁愿问上面的问题来理解问题是什么。

Answer 1

你快到了，只需将 transition: none 添加到你的 a:hover ~ div

https://jsfiddle.net/e3p97ewj/

在纯 css 的新悬停处结束 运行 过渡

Ending a running transition at new hover in pure css

css

transition

在纯 css 的新悬停处结束运行过渡