我试图结束(覆盖)纯CSS中的运行转换.尝试覆盖的css代码不起作用;它不仅被忽视,我无法解释这种行为. 下面是一个示例代码,其中包含3个链接,每个链接后跟1个div.之后再添加3个div用于测
... . . 我试图结束(覆盖)纯CSS中的运行转换.尝试覆盖的css代码不起作用;它不仅被忽视,我无法解释这种行为.
下面是一个示例代码,其中包含3个链接,每个链接后跟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>
>悬停在链接上时,由于选择器,只有第一个跟随div的宽度发生了变化.
>转换延迟使此悬停持续1秒.
问题是,当新的悬停发生时,我希望所有后续框中的所有悬停效果都终止.把它想象成一个菜单;当徘徊一个新的menupoint,我希望所有其他子菜单关闭,只有当前的子菜单打开.
>希望是〜选择器使所有后续div恢复到正常宽度,然后a：hover div可以扩展正确宽度.但这不起作用.
颜色：添加红色文本着色以进行测试.因为经过一些测试我发现问题不是〜选择器也不是css-order,而是转换.删除所有过渡线和结果完全符合预期,没有延迟.你可以在这里看到结果：
> Here is a fiddle与上述非工作代码,和
> here is a fiddle删除了过渡代码行,这一切都有效(但没有延迟).
没有转换代码行,所有后续div都会获得红色文本 – 底部还有三个额外的文本.但是对于转换代码行,它们不是红色的 – 实际上只有被覆盖的代码行是红色的,这意味着代码行不会被完全忽略,但不再作为〜选择器.
结论是过渡干扰.我显然无法阻止正在运行的转换,并且干扰的代码块表现出意外而不会被忽略.
导致这种情况的转换代码行的确切行为是什么？
对于那些好奇的我可以告诉我实际上在项目中我正在处理原始宽度,然后悬停为0.因此这个解决方案将起作用：
a:hover ~ div { display:none;} 我没有尝试重置宽度,而是移除宽度,一切都很好.我宁愿问上面的问题要明白,问题是什么.
.解决方法
. 你几乎就在那里,只需将过渡：none添加到你的a：hover~div
https://jsfiddle.net/e3p97ewj/
. . .. ...