Предотвратить псевдовозбуждение псевдоэлемента?

Если у меня есть разметка:

<div class="a b"></div>

где класс .a имеет связанный с ним класс hover

и класс .b имеет связанный с ним псевдоэлемент... так:

div
{
    width: 100px;
    height: 100px;
}
.a { background: red; display: inline-block; }
.a:hover { background: green; }

.b:after
{
    content: '';
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-left: 100px;
    background: pink;
}

Возможно ли с помощью css предотвращать запуск псевдоэлемента .a class hover?

FIDDLE

Ответы

Ответ 1

Следующий css делает трюк для современных браузеров (не IE10-):

.b:after {
  pointer-events: none;
}

pointer-events: none позволяет элементам не получать события наведения/клика.

Смотрите эту скрипту.

Внимание

pointer-events поддержка элементов, отличных от SVG, находится в относительном раннем состоянии. developer.mozilla.org дает следующее предупреждение:

Использование указателей-событий в CSS для элементов, отличных от SVG, является Экспериментальный.. Функция, которая использовалась в проекте CSS3 UI но из-за многих открытых вопросов было отложено CSS4.

Толкование модели коробки Chrome display: inline-block вызывает мерцание в приведенную выше скрипту.
Если вы переключитесь на display: block вместо этого, вы получите правильную интерпретацию окна.
У Firefox нет этой проблемы.
Для обеспечения согласованной интерпретации модели коробки используйте следующее:

.b:after {
  pointer-events: none;
  display: block;
}

Просмотрите эту скрипту в Chrome, чтобы увидеть эффект мерцания.