¿Por qué se desplaza el cursor para la entrada activada en la etiqueta correspondiente en CSS?

Question

¿Me falta algo, o el comportamiento de este ejemplo - http://dabblet.com/result/gist/1716833 - es bastante extraño en Webkits/Fx?

hay una entrada con la etiqueta y el selector siguiente:

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

Y este estilo se activa cuando se pasa el label unido a la input, no sólo el input sí. Aún más: hay una diferencia entre el label con for y input envuelto en un label - si al pasar el cursor al input al principio y luego mueve el cursor directamente al .target, el disparador extraño no se disparará en la versión envuelta.

Y esto solo se reproduce en Firefox y Safari/Chrome, pero en Opera está bien.

Entonces, la pregunta es: si este problema se describe en alguna parte de las especificaciones? No pude encontrar ningún lugar apropiado que lo describa y me diga qué comportamiento es el correcto.

Answer 1

Esto está en la especificación HTML ahora; no fue hasta la October 2012 WD que se añadió a W3C HTML5 (énfasis mío):

La pseudo-clase :hover se define para que coincida con un elemento "mientras que el usuario designa un elemento con un dispositivo de puntero" . Para los fines de la definición de sólo el pseudo-clase :hover, un agente de usuario HTML debe considerar un elemento de ser uno que el usuario designa si es:

• Un elemento que el usuario indica el uso de un dispositivo de puntero .

• Un elemento que tiene un descendiente que el usuario indica utilizando un dispositivo señalador.

• Un elemento que es el control etiquetado de un elemento label que coincide actualmente: hover.

texto idéntico aparece en la living spec.

---

descubrí este mismo comportamiento hace unos años en el diseño anterior del formulario de contacto de mi sitio, donde label:hover también desencadena :hover en cualquier elemento de entrada de forma que es ya sea su descendiente o referenciados por su atributo for.

Este comportamiento en realidad se agregó a una compilación reciente de Gecko (motor de diseño de Firefox) en this bug report junto con this (rather short) mailing list thread, y se implementó en WebKit many years back. Como nota, el comportamiento no se reproduce en Opera; parece que Opera Software y Microsoft no recibieron la nota.

Todo lo que puedo encontrar en la especificación de que podría relacionarse con este comportamiento de alguna manera es here, pero no sé a ciencia cierta (nota en cursiva por mí):

• El :hover pseudo- la clase se aplica mientras el usuario designa un elemento con un dispositivo señalador, pero no necesariamente lo activa. Por ejemplo, un agente de usuario visual podría aplicar esta pseudo-clase cuando el cursor (puntero del mouse) se cierne sobre un cuadro generado por el elemento.

[...]

selectores no define si el padre de un elemento que es ‘:active’ o ‘:hover’ también está en ese estado. [No aparece para definir lo mismo para el hijo de un elemento cualquiera.]

Nota: Si el ':hover' estado se aplica a un elemento debido a que su hijo se designa mediante un dispositivo señalador, entonces es posible que ':hover' se aplique a un elemento que no está debajo del dispositivo señalador.

Pero lo que puedo concluir es que este comportamiento es por diseño en al menos Gecko y WebKit.

---

En cuanto a lo que usted indica aquí:

Aún más: hay una diferencia entre el label con for y input envuelto en una label - si le pasa el input al principio y luego mover el cursor directamente al .target - el extraño "hover" no se disparará en la versión envuelta.

Dado el comportamiento anterior, la única posibilidad que queda aquí es que simplemente ha sido mordido por la cascada.

Básicamente, esta regla:

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

es más específico que esta regla:

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

Así en los navegadores aplicables, el label.target por su primera casilla de verificación siempre será roja en vuelo estacionario, debido a que la regla más específica siempre tiene prioridad. La segunda casilla de verificación va seguida de span.target, por lo que no se aplica ninguno de estos comportamientos; solo la segunda regla puede tener efecto mientras el cursor está sobre el span.target.