如何使用css和/或javascript实现此技巧

How can I do this trick with css and/or javascript?

本文关键字：实现 javascript 何使用 css      更新时间：2023-09-26

这是代码：

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为"image"的所有链接都变为绿色(就像用户将鼠标放置在链接上一样(。

如果可能的话，我更喜欢只使用CSS。

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

http://jsfiddle.net/Tzpmd/

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

尽管与+一起使用的:hover存在一些浏览器怪癖，但您需要进行一些测试，看看您支持的浏览器是否受到影响。

当然，+在旧的浏览器中将不受支持。

如果中间有一个元素，则可以使用~。

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

@xRobot，你的fiddle的问题是你没有引用#topimg的兄弟，即table而不是tr#image。您所引用的元素是table元素的子元素，也是#topimg元素的侄女(而不是兄弟元素(。

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

并使用本页上的示例：

img:hover ~ table #image a{ color:green; }
相关文章：