Почему наведите курсор на ввод, вызванный на соответствующей метке в CSS?

Мне что-то не хватает, или поведение этого примера - http://dabblet.com/result/gist/1716833 - довольно странно в Webkits/Fx?

Имеется вход с меткой и следующим селектором:

input:hover + .target {
    background: red;
}

И этот стиль срабатывает при наведении label на input, а не только на input. Более того: существует разница между label с for и input, завернутым в label, если вы сначала наведете input, а затем переместите курсор прямо на .target - странный наведение не будет запускаться в завернутой версии.

И это воспроизводится только в Firefox и Safari/Chrome, но в Opera это нормально.

Итак, вопросы: если эта проблема описывается где-то в спецификациях? Я не мог найти подходящее место, которое описывает его, и говорит, какое поведение является правильным.

Ответы

Ответ 1

Теперь это в спецификации HTML; только в октябрь 2012 WD, что он был добавлен в W3C HTML5 (выделение мое):

Псевдокласс класса :hover определяется как соответствующий элементу ", в то время как пользователь обозначает элемент с указывающим устройством". В целях определения только псевдокласса :hover пользовательский агент HTML должен рассматривать элемент как тот, который пользователь обозначает, если он:

  • Элемент, который пользователь указывает с помощью указывающего устройства.

  • Элемент с потомком, который пользователь указывает с помощью указывающего устройства.

  • Элемент, который является помеченным элементом управления элементом label, который в настоящее время сопоставляется: hover.

Идентичный текст появляется в условиях жизни.

Я обнаружил это поведение несколько лет назад в предыдущем дизайне моей контактной формы моего сайта, где label:hover также запускает :hover для любого элемента ввода формы, который либо является его потомком, либо ссылается его атрибутом for.

Это поведение было добавлено в недавнюю сборку Gecko (механизм компоновки Firefox) в этот отчет об ошибке вместе с этот (довольно короткий) поток списка рассылки, и он был реализован в WebKit много лет назад. Как вы заметили, поведение не воспроизводится в Opera; похоже, что Opera Software и Microsoft не получили заметку.

Все, что я могу найти в спецификации, которая может относиться к этому поведению, как-то здесь, но я точно не знаю (выделено курсивом заметьте меня):

  • Псевдокласс класса :hover применяется, когда пользователь указывает элемент с указывающим устройством, но не обязательно активирует его. Например, визуальный агент пользователя может применять этот псевдокласс, когда курсор (указатель мыши) наводится на поле, сгенерированное элементом.

[...]

Селекторы не определяют, находится ли в этом состоянии родительский элемент элемента с :active или ':hover. [Кажется, он не определяет то же самое для дочернего элемента.]

Примечание. Если состояние ':hover применяется к элементу, потому что его дочерний элемент указан указательным устройством, тогда возможно, что' :hover применяется к элементу, который не находится под ним указывающее устройство.

Но я могу заключить, что это поведение по дизайну, по крайней мере, в Gecko и WebKit.

Относительно того, что вы здесь указываете:

Более того: существует разница между label с for и input, завернутым в label, если вы сначала наведете input, а затем переместите курсор прямо в .target - странный наведение не будет запускаться в завернутой версии.

Учитывая приведенное выше поведение, единственная возможность, оставленная здесь, состоит в том, что вы просто укусили каскад.

В принципе, это правило:

/* 1 type, 1 pseudo-class, 1 class -> specificity = (0, 2, 1) */
input:hover + .target {
    background: red;
}

Более конкретно, чем это правило:

/* 1 class, 1 pseudo-class         -> specificity = (0, 2, 0) */
.target:hover {
    background: lime;
}

Таким образом, в применимых браузерах label.target при первом флажке всегда будет красным при наведении, потому что более конкретное правило всегда имеет приоритет. За вторым флажком следует span.target, поэтому ни одно из этих действий не применяется; только второе правило может вступить в силу, когда курсор находится над span.target.