带有`：hover`和多个相邻兄弟选择器的Webkit错误

小编典典

css

Safari和Chrome以及Opera和Firefox可以处理:hover伪类和相邻兄弟选择器：

a:hover + div {}

这可行。

但是，当添加另一个相邻的兄弟姐妹时：

div:hover + a + div {}

Webkit分崩离析。

但是，如果您先将鼠标悬停在该样式上<a>， 然后将 鼠标悬停在<div>该样式上，则会按照应有的方式应用样式。

我进一步感到困惑，因为如果添加：

div:hover ~ div {}

无论是否声明了样式，它都会按预期方式开始工作。

我在以下位置看到此问题：

对于OSX。

有任何想法吗？

阅读 330

2020-05-16

共1个答案

小编典典

您可以通过伪装body元素上的动画来克服Webkit的伪类+常规/相邻兄弟选择器错误：

body { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix { 
  from { padding: 0; } 
  to { padding: 0; } 
}

2020-05-16