为什么在CSS中相应标签上的输入触发缓存？

我错过了一些东西,还是这个例子的行为 – http://dabblet.com/result/gist/1716833 – 在Webkits / Fx中相当奇怪？

有一个带有标签的输入和以下选择器：

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

当您将鼠标悬停在输入的标签上时,不仅仅是输入本身,触发了这种风格.更重要的是：标签与for和输入包装在标签之间有区别 – 如果您首先悬停输入,然后将光标直接移动到.target – 奇怪的悬停将不会在包装版本中触发.

而这只是在Firefox和Safari / Chrome中再现,但在Opera中是可以的.

所以,问题是：如果这个问题在规范的某个地方被描述？我找不到任何适当的地方描述它,并告诉什么行为是正确的.

解决方法

我几年前就发现了我的网站联系表(之前已经被删除)的以前设计的这个行为,其中label：hover也触发：将任何形式的输入元素悬停在其后代或由其引用属性.

这个行为实际上是添加到this bug report中的最新版本的Gecko(Firefox的布局引擎)以及this (rather short) mailing list thread,并在WebKit many years back中实现.正如您所注意到的,Opera中不会重现行为;看来Opera软件和Microsoft没有获得备忘录.

所有我可以在规范中找到可能与这个行为有关的东西是here,但我不知道(我的斜体注)：

The :hover pseudo-class applies while the user designates an element with a pointing device,but does not necessarily activate it. For example,a visual user agent Could apply this pseudo-class when the cursor (mouse pointer) hovers over a Box generated by the element.

[…]

Selectors doesn’t define if the parent of an element that is ‘:active’ or ‘:hover’ is also in that state. [It does not appear to define the same for the child of an element either.]

Note: If the ‘:hover’ state applies to an element because its child is designated by a pointing device,then it’s possible for ‘:hover’ to apply to an element that is not underneath the pointing device.

但是我可以得出结论,这种行为至少在Gecko和WebKit中是设计的.

关于你在这里说的话

Even more: there is a difference between the label with for and input wrapped in a label — if you’d hover the input at first and then move the cursor straight to the .target — the strange hover won’t trigger in wrapped version.

鉴于上述的行为,这里唯一的可能性就是您已经被级联咬伤了.

基本上这个规则：
/* 1 type,1 pseudo-class,1 class -> specificity = (0,2,1) */
input:hover + .target {
    background: red;
}
比这个规则更具体：
/* 1 class,1 pseudo-class         -> specificity = (0,0) */
.target:hover {
    background: lime;
}
因此,在适用的浏览器中,您的第一个复选框的label.target将永远是悬停的红色,因为更具体的规则始终优先.第二个复选框后面是一个span.target,所以这个行为都不适用;当光标在span.target上方时,只有第二条规则可以生效.

为什么在CSS中相应标签上的输入触发缓存？

解决方法

相关文章