我怎样才能做到这一点与CSS和/或JavaScript？

Question

这是代码：

HTML：

<img src="..." /> 

// other stuff 

<div id="image"> 
<a href="" > bla bla bla </a> 
<a href="" > ble ble ble </a> 
</div> 

CSS：

#image a:hover{color:green;} 

我想这一点：

当使用者将鼠标移动到图像，然后所有的链接在与ID“图像”的div变成绿色（就像用户把鼠标放在链接上一样）。

如果可能，我宁愿只用CSS来做。

Answer 1

img:hover + #image a { 
    color: green; 
    text-decoration: none; 
} 

http://jsfiddle.net/Tzpmd/

Answer 2

img:hover + #image a{color:green;} 

虽然有一些浏览器对于:hover与+使用的怪癖，所以你需要做一些测试，看看你支持的浏览器都受到影响。

旧版浏览器不支持+。

---

如果有介于两者之间的元素，你可以使用~代替。

img:hover ~ #image a{color:green;} 

Answer 3

@xRobot，你摆弄的问题是，你不引用的#topimg的兄弟，这是table不是tr#image。您引用的元素是表元素的子元素，#topimg元素的侄女（不是同级）。

检查该更新的提琴：http://jsfiddle.net/QSy9H/32/

...并使用此页面上的例子：

img:hover ~ table #image a{ color:green; }