html - CSS hover div 更改另一个 div 样式(不在同一父项下)

Question

请参阅下面 fiddle 中的示例 3...

https://jsfiddle.net/8opnvq37/1/

HTML

Example 1
<div class="a">A</div>
<div class="b">B</div>
<br /><br />
Example 2
<div class="a">A</div>
<div id="box"><div class="b">B</div></div>
<br /><br />
Example 3
<div id="box2"><div class="a">A</div></div>
<div class="b">B</div>

CSS

.a:hover ~ .b,
.a:hover ~ #box .b
{
background: #3F6;
}

如您所见，当您将鼠标悬停在 A 上时，示例 1 和示例 2 可以正常工作。我知道要使悬停效果起作用，元素必须在同一父级下——除非您在示例 2 中指定它。但是如何如示例 3 所示，当 .a 在不同的父项下时，您可以使用它吗？？

Answer 1

它是否绝对需要悬停在 .a 元素上？如果是这样，我不确定纯 css 是否可行。不过，这会起作用:

#box2:hover ~ .b { background: #3f6; }