开发者

css and function hover

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 { ... }

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜