即使没有嵌套或同级，CSS 也只会在悬停时更改单独的 div 颜色？

Question

我有两个 div:

<div>
  <a id="changecolor">Change Color</a>
</div>

<div id="tobechanged">
  Change My Color
</div>

我有两个问题:

1. 如何仅使用 CSS 来使 #tobechanged 的背景颜色在我悬停在“#changecolor”上时发生变化？
2. 有没有一种方法，只使用 CSS3，点击“changecolor”会触发 CSS 颜色变化而不是悬停？

以下是我尝试过的:

#changecolor:hover + #tobechanged {
 background:yellow;
}

只有当我有这样的东西时才有效:

<div>
  <a id="changecolor">Change Color</a>
  <div id="tobechanged">
    Change My Color
  </div>

</div>

但我不想让“tobechanged”成为“changecolor”的 sibling 或 child 。

Answer 1

再次检查代码并查看 this topic 后确定

我找到了你的第一个 div:

<div>
  <a id="changecolor">Change Color</a>
</div>

<div id="tobechanged">
  Change My Color
</div>

没有 id 名称，在更改后:

<div id = "mycolor">
  <a id="changecolor">Change Color</a>
</div>

<div id="tobechanged">
  Change My Color
</div>

CSS 为:

#mycolor:hover + #tobechanged {
    background:yellow;
}

我能够改变它。

但是 我不确定你是否想在 div:hover 上改变颜色或 a:hover (通过 ID 调用它们)所以如果你想在 a:hover 上使用它:

那么就没有必要让第一个 div 包含 <a>元素，所以 HTML 可能是这样的:

<a id="changecolor">Change Color</a>

<div id="tobechanged">
  Change My Color
</div>

和 CSS 类似:

#changecolor:hover + #tobechanged {
    background:yellow;
}

寻找这个 mycolor:hover fiddle和 this对于 changecolor:hover

希望对你有帮助

关于你的第二个问题 @Maverick给了你答案或有用的link