Question

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

如果用户点击div，则div2中的CSS应该更改。这个代码有可能吗？

Answer 1

:focus伪类用于表单元素。您可以使用表单元素，或使用不同的伪类，如:hover

以下是:focus

的输入

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

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

这是你的:hover

的div

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

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

您可以使用复选框hack伪造:focus常规文本。（或者在您的情况下，通过在单击文本时对:focus进行更改来模拟.div2）无线电黑客

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>

Answer 2

需要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>

有可能集中div并改变Css与另一个吗？

2 个答案: