CSS悬停div更改另一个div样式（不在同一个父级下）

Question

见下面的小提琴示例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;
}

如您所见，示例1＆amp;当你将鼠标悬停在A上时，2我正在工作。我知道要使悬停效果起作用，元素必须在同一个父项下 - 除非你在示例2中指定它。但是当.a处于以下状态时，如何让它工作一个不同的父，如例3所示??

Answer 1

它是否绝对需要悬停在.a元素上？如果是这样，我不确定纯css是否可行。但这会奏效：

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

Answer 2

好的，我使用javascript工作了

http://jsfiddle.net/6vh5L2t0/

HTML

<div id="c">Div C</div>
---
<div id="box">
<div id="d">Div D</div></div>

javascipt的

$('#d').hover(
function(){
$('#c').css('background', '#F00')
}, 
function() { 
$('#c').css('background', '')
});