为什么在CSS中的相应标签上触发输入悬停？ [英] Why is hover for input triggered on corresponding label in CSS?

问题描述

我缺少某些内容，或者此示例的行为 - http://dabblet.com/result/gist/1716833 - 在Webkits / Fx中比较奇怪？

Am I missing something, or the behavior of this example — http://dabblet.com/result/gist/1716833 — is rather strange in Webkits/Fx?

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

There is an input with label and the following selector:

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

当您悬停标签输入附加的，不仅输入本身。更多：标签与之间和输入 $ c>包装在标签 - 如果您先悬停输入，然后将光标直接移动到 .target - 奇怪的悬停在包装版本中不会触发。

And this style is triggered when you hover the label attached to the input, not only the input itself. 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.

和Safari / Chrome，但在Opera中它是确定的。

And this is only reproduces in Firefox and Safari/Chrome, but in Opera it's ok.

所以，问题是：如果这个问题在规格说明的某个地方？

So, the questions is: if this issue is described somewhere in specs? I couldn't find any appropriate place that describes it and tells what behavior is right.

推荐答案

我发现这个行为有几个几年前，在我的网站的联系表单（其已被删除）的以前的设计，其中标签：hover 也触发：hover 对于任何表单输入元素，它是其后代或由其为属性引用。

I discovered this very behavior a few years ago on the previous design of my site's contact form (which has since been taken down), where label:hover also triggers :hover on any form input element that is either its descendant or referenced by its for attribute.

行为实际上已添加到此错误报告中的最近版本的Gecko（Firefox的布局引擎）以及< a href =http://lists.w3.org/Archives/Public/public-html/2011May/0130.html>这个（相当短的）邮件列表线程，它在WebKit中实现多年前。正如你所注意到的，行为不在Opera中重现;它看起来像Opera软件和微软没有得到备忘录。

This behavior was actually added to a recent build of Gecko (Firefox's layout engine) in this bug report along with this (rather short) mailing list thread, and it was implemented in WebKit many years back. As you note, the behavior doesn't reproduce in Opera; it looks like Opera Software and Microsoft didn't get the memo.

我可以在规范中找到可以与这种行为有关是这里，但我不知道

All I can find in the spec that could relate to this behavior somehow is here, but I don't know for sure (italicized note by me):

• ：hover 伪类在用户使用指点设备指定元素时应用，但不一定激活它。例如，当光标（鼠标指针）悬停在该元素生成的框上时，可视用户代理可以应用此伪类。

• 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.

[...]

选择器不定义元素的父元素是<活动'或'：hover '也处于该状态。

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.]

注意：如果：hover 状态适用于元素，因为其子元素由定位设备指定，则可能会出现'：hover '。

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。

But what I can conclude is that this behavior is by design in at least Gecko and WebKit.

关于你在这里的状态：

更多：包含在标签中的和 code> - 如果你先悬停输入，然后将光标直接移动到 .target

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.

鉴于上述行为，这里剩下的唯一可能是你'

Given the above behavior, the only possibility left here is that you've simply been bitten by the cascade.

基本上，这条规则：

/* 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 上方时生效。

So in applicable browsers, the label.target by your first checkbox will always be red on hover, because the more specific rule always takes precedence. The second checkbox is followed by a span.target, so none of this behavior applies; only the second rule can take effect while the cursor is over the span.target.

这篇关于为什么在CSS中的相应标签上触发输入悬停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！