我怎樣才能做到這一點與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; }