将鼠标悬停在div上并进行另一个div更改颜色

Question

如果我将鼠标悬停在div #id1上，我想让div #match3改变颜色。为什么这不起作用？

我不想只使用JAVASCRIPT css。

http://jsfiddle.net/fA2gv/1/

html

<div id="id1">DIV</div> 
<div id="id2">DIV</div> 
<div id="id3">DIV</div> 


<div id="match1">a </ div>
<div id="match2">b </ div>
<div id="match3">c </ div>

CSS

#id1:hover ~ #match3 {

color:red;    

}

Answer 1

您的div代码未完全关闭..

<div id="id1">DIV</div>
<div id="id2">DIV</div>
<div id="id3">DIV</div>
<div id="match1">a</div>
<div id="match2">b</div>
<div id="match3">c</div>

应该有效：http://jsfiddle.net/fA2gv/5/

Answer 2

除了您需要将</ div>更改为<div>

之外，它才有效

选中此fiddle

Answer 3

您的HTML无效。删除</ div>中的空格：

<div id="id1">DIV</div> 
<div id="id2">DIV</div> 
<div id="id3">DIV</div> 


<div id="match1">a </div>
<div id="match2">b </div>
<div id="match3">c </div>

现场演示： http://jsfiddle.net/fA2gv/6/

Answer 4

<div id="match1">a </ div>

您需要删除结束标记中的空格。

<div id="match1">a </div>

看到这个小提琴：http://jsfiddle.net/fA2gv/7/