Question

我<input>内有<div>。现在，如果我使用伪类:hover，两个元素都会获得伪类。

但如果我使用:focus，只有<input>获得该伪类。我已经读过，只有某些元素可以包含:focus伪类，而<div>不是其中之一。

现在我想知道是否还有一些我可以使用的伪类存在于两个标记上，其行为与:focus类似，但会出现在:hover这两个标记上。

更新： plunker说明了问题。

Answer 1

实际上，为了能够集中注意力，元素必须是focusable：

如果满足以下所有条件，则元素可聚焦   满足：


已设置元素tabindex focus flag。

该元素可以是being rendered，也可以是canvas represents的embedded content元素的后代。

元素不是inert。

元素不是disabled。

在您的情况下，问题是第一个条件。您可以通过tabindex属性设置其tabindex焦点标记，使div可关注。

p:focus {
  background: #0f0;
}

<p tabindex="-1">Click me. I can be focused</p>
<p>But I can't :(</p>

然而，有一个问题。文档中只能有一个聚焦元素。因此，div和input无法同时关注。

实际上，您不希望在焦点处选择div，而是在包含焦点元素时选择它。

Selectors Level 4草案通过创建新的:focus-within伪类来解决这个问题：

9.4. The Generalized Input Focus Pseudo-class: :focus-within

:focus-within 伪类适用于哪些元素   :focus伪类适用。另外，祖先   匹配:focus-within的元素也匹配   :focus-within

可悲的是浏览器还不支持它。所以同时使用JS。

Answer 2

我认为你不能只用CSS做你想做的事情，你可能需要一点点jquery：

$(document)
.on("focus", "input", function(){

///here what you want, in this example add a class to your div
$('div').addClass("divfocus");

})

<强> JSFIDDLE

伪类对子元素和父元素的影响

2 个答案: