是否有可能集中div和改變另一個Css？

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東西。 （或無線電黑客，在你的情況下，通過使更改.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>

Answer 2

需要tabindex屬性的屬性，使格捕捉的焦點。使用值：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>