Question

Safari и Chrome, а также Opera и Firefox могут обрабатывать селекторы псевдокласса :hover и смежных братьев и сестер:

a:hover + div {}

Это работает.

Однако, когда добавляется еще один соседний брат:

div:hover + a + div {}

Webkit разваливается.

Однако, если вы сначала наведите курсор на <a> и , тогда наведите курсор на <div>, стиль будет применен так, как должен.

Я еще больше сбит с толку, потому что если вы добавите:

div:hover ~ div {}

с объявленным стилем или без него, он начинает работать так, как должен.

Я вижу эту проблему в:

для OS X.

Есть идеи?

albert · Answer 1 · 30 ноября 2011

вы можете преодолеть псевдоклассы Webkit + общие или смежные ошибки селекторов родного брата, симулируя анимацию на элементе body:

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

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

вы можете проверить это здесь: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

ScottS · Answer 2 · 20 июня 2013

Easy Fix без анимации

Обрабатывается аналогичная проблема здесь , где эта идея измененных псевдоклассов решила ее (примечание: nth-child(n) всегда будет соответствовать):

div:hover + a:nth-child(n) + div

tiffon · Answer 3 · 09 декабря 2012

В качестве альтернативы, исправление может быть применено только к элементам, имеющим проблему обновления, а не к элементу body:

.force-repaint { -webkit-animation: bugfix infinite 1s; }

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

Ошибка Webkit с `: hover` и множеством селекторов смежных братьев и сестер