是否有可能将DIV集中在另一个区域

Question

div:focus ~ .div2 {
    background-color:red;
    height:400px;
    margin-top:20px;
    margin-left:20px;
};

如果用户单击DIV2的DIV，则应更改。这个代码有可能吗？

Answer 1

需要tabindex属性才能使div抓住焦点。使用值：0，因此不会与可以通过选项卡具有焦点的其他元素的顺序混乱。

https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex

指定的带有TabIndex属性的元素是交互式内容。

https://developer.mozilla.org/en-us/docs/web/html/global_attributes/tabindex

0意味着该元素应通过顺序键盘导航进行焦点和可及，但其相对顺序是由平台约定定义的；

div {border:solid;
}
div:focus~.div2 {
  background-color: red;
  height: 400px;
  margin-top: 20px;
  margin-left: 20px;
}
.div2 {
  background-color: yellow;
  height: 200px;
  margin-top: 0px;
  margin-left: 0px;
  transition: 0.5s;
}

<div tabindex="0"> click or tab can give me the focus, click outside and i loose it </div>
<div class="div2"> div2</div>

Answer 2

:focus pseudo类用于表单元素。您可以使用表单元素，也可以使用其他伪类类，例如:hover

这是:focus

的输入

input:focus ~ .div2 {
    background-color:red;
    height:400px;
    margin-top:20px;
    margin-left:20px;
}

<input type="text">
<div class="div2">bar</div>

这是您的Div， :hover

div:hover ~ .div2 {
    background-color:red;
    height:400px;
    margin-top:20px;
    margin-left:20px;
}

<div>foo</div>
<div class="div2">bar</div>

您可以使用Checkbox Hack使用常规文本伪造:focus事物。（在您的情况下，或单击文本时对.div2进行更改来模拟:focus）

input:checked ~ .div2 {
    background-color:red;
    height:400px;
    margin-top:20px;
    margin-left:20px;
}
input {
  display: none;
}

<input type="radio" id="foo"><label for="foo">foo</label>
<div class="div2">bar</div>