Question

当我将光标悬停在链接上时，如何更改div文本字体的颜色？用css做不可能吗？我的尝试：

<style type="text/css">
    a:hover .text {
       color:#FF00FF;
    }
    </style>
    </head>
    <body>
    <a href = "">link</a>
    <div class = "text">TEXT TEXT</div>
    </body>

Answer 1

选择器a:hover .text表示：选择具有“{”的“文本”类的任何元素A具有悬停状态的元素，如下所示：

<a href="">link <span class="text">TEXT TEXT</span></a>

但根据您的标记，您更需要选择器a:hover + .text。这意味着：选择具有悬停状态的A元素为a descendant的“text”类的任何元素。

Answer 2

您需要的是“下一个兄弟”选择器，并由加号表示，因此：

a:hover + .text { .... }

但请注意+选择器在Internet Explorer中不起作用：在IE6中，它根本不起作用。 IE7和IE8支持它，但是有动态页面的bug，所以可能会破坏你的悬停示例。不过，它在所有其他浏览器中都可以。

Quirksmode有a very good table个浏览器支持哪些CSS功能。

Answer 3

如果有多个div class=text并且您只想更改第一个div，请使用

a:link ~ .text { ... }

css和函数悬停

3 个答案: