可以在 :focus 上设置其他元素的样式吗？

【问题标题】：Possible to style other element on :focus?可以在 :focus 上设置其他元素的样式吗？
【发布时间】：2014-06-02 22:49:29
【问题描述】：

是否可以在特定元素的 :focus 上设置另一个元素的样式？

类似：

input:focus #header {
    display: none;
}

我试过这样做，但没有成功。

【问题讨论】：

【解决方案1】：

是的，如果元素是 sibling 或 child 到 :focus 元素，这是可能的。如果不是你的情况（影响你想要的任何东西），那么你应该使用 javascript。

【讨论】：

【解决方案2】：

.input:focus #header

这是应用选择所有#header，它们是input的后代

如果你想要它的同级，请使用下一个同级选择器+：

input:focus + #header

【讨论】：

【解决方案3】：

HTML：

  <button>button</button>
  <div class="div1">div1</div>

CSS：

button:hover ~ .div1 {
    color: red; 
}

因此，您将鼠标悬停在按钮上，但 div1 元素已设置样式。

只要确保 BUTTON 元素是第一个元素，您要设置样式的元素是第二个元素。

【讨论】：