我怎么能用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;}

我想要这个：

当用户将鼠标放在图像上时，div中的所有链接都带有id＆＃34; image＆＃34;变为绿色（就像用户将鼠标放在链接上一样。）。

如果可能的话，我更喜欢只使用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。您引用的元素是table元素的子元素，＃topimg元素的侄女（不是兄弟元素）。

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

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

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