Ошибка Webkit с `:hover` и множеством селекторов смежных братьев и сестер
Safari и Chrome, а также Opera и Firefox могут справиться с :hover
селекторы псевдокласса и соседних братьев и сестер:
a:hover + div {}
Это работает.
Однако, когда добавляется еще один соседний брат:
div:hover + a + div {}
Webkit разваливается.
Тем не менее, если вы впервые наведите курсор на <a>
а затем наведите курсор на <div>
стиль применяется так, как должен.
Я еще больше сбит с толку, потому что если вы добавите:
div:hover ~ div {}
с объявленным стилем или без него, он начинает работать так, как должен.
Я вижу эту проблему в:
- Google Chrome 15.0.874.121
- Safari 5.1.1
для OS X.
Есть идеи?
3 ответа
Вы можете преодолеть ошибки псевдо-классов Webkit + общих / смежных селекторов братьев и сестер, симулируя анимацию на элементе body:
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix {
from { padding: 0; }
to { padding: 0; }
}
Вы можете проверить это здесь: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/
Легко исправить без анимации
Здесь решена аналогичная проблема, когда эта идея измененных псевдоклассов решила ее (примечание: nth-child(n)
всегда будет соответствовать):
div:hover + a:nth-child(n) + div
В качестве альтернативы, исправление может быть применено только к элементам, которые имеют проблему обновления, а не к элементу body:
.force-repaint { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix {
from { fill: 0; }
to { fill: 0; }
}