css and function hover_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-17 15:42 出处：网络

when I hover cursor on link, how change div text font c开发者_如何学Color? Is impossible then do with css?

相关专题：css

when I hover cursor on link, how change div text font c开发者_如何学Color? Is impossible then do with css? my try:

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

The selector a:hover .text means: select any element with the class “text” that is a descendant of an A element that has the hover state, like this:

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

But according to your markup you rather need the selector a:hover + .text. This means: select any element with the class “text” that is immediately preceded by an A element that has the hover state.

What you need is known as the 'next sibling' selector, and is signified by the plus symbol, thus:

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

However please note that the + selector does not work in Internet Explorer: In IE6, it doesn't work at all. IE7 and IE8 support it, but have bugs with dynamic pages, so will probably break with your hover example. It will be fine in all other browsers, though.

Quirksmode has a very good table of which browsers support which CSS features.

If there's more than one div with class=text and you only want to change the first one use

a:link ~ .text { ... }