在纯css的新悬停中结束正在运行的转换

Question

我试图结束(覆盖)纯CSS中的运行转换.尝试覆盖的css代码不起作用; 它不仅被忽视,我无法解释这种行为.

下面是一个示例代码,其中包含3个链接,每个链接后跟1 div.div之后添加了3个以上用于测试.

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>

• 在鼠标悬停在链接上时,由于选择器,只有第一个跟随div宽度发生变化+.

• 转换延迟使此悬停持续1秒.

问题是,当新的悬停发生时,我希望所有后续框中的所有悬停效果都终止.把它想象成一个菜单; 当徘徊一个新的menupoint,我希望所有其他子菜单关闭,只有当前的子菜单打开.

• 希望是~选择器使所有跟随div回到正常宽度,然后a:hover + div可以扩展正确宽度的宽度.但这不起作用.

该color: red文本着色加入测试.因为经过一些测试后我发现问题不是~选择器,也不是css-order,而是转换.删除所有过渡线和结果完全符合预期,没有延迟.你可以在这里看到结果:

• 以下是上述非工作代码的小提琴,以及
• 这里有一个移除代码行的小提琴,它一切正常(但缺少延迟).

如果没有转换代码行,则所有后续代码都会div获得红色文本 - 底部还有三个额外的代码行.但与转变码线,他们是不是红色-实际上只是悬停的一个coloered红色,这意味着代码行也不完全忽略,但作为一个不工作~选择了.

结论是过渡干扰.我显然无法阻止正在运行的转换,并且干扰的代码块表现出意外而不会被忽略.

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

---

对于那些好奇的我可以告诉我实际上在项目中我正在处理原始宽度,然后悬停为0.因此这个解决方案将起作用:

a:hover ~ div {
  display:none;
}

我没有尝试重置宽度,而是移除宽度,一切都很好.我宁愿问上面的问题要明白,问题是什么.

Answer 1

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

https://jsfiddle.net/e3p97ewj/