开发者

Is it correct to combine active and hover pseudo selector like a:active:hover.?

开发者 https://www.devze.com 2023-01-28 15:27 出处:网络
I\'ve seen this somewhere, but I can\'t fi开发者_开发百科nd more info telling me if it\'s correct:

I've seen this somewhere, but I can't fi开发者_开发百科nd more info telling me if it's correct:

.selector a:active:hover { color: #777; }
.selector a:hover:active { color: #777; }

I don't remember which one of the 2 it was.

But either way, Firefox doesn't seem to like it and does nothing.

Was it another example of a tutorial showing bad practice.??


Both are fine (and identically equivalent). I've just tested in Firefox 4.0b6/Mac and it works exactly as I would expect. In the below example, the link turns red when I point at it, and then green while I hold the mouse button down.

<!DOCTYPE HTML>
<title>Test</title>
<style>
a:hover { color: red; }
a:active { color: yellow; }
a:hover:active { color: green; }
</style>
<h1><a href="test">gggg</a></h1>

It is unusual to want a link to be styled differently when activated with the mouse than with the keyboard though.

I suspect you may be making a classic mistake. :active means "While being activated (e.g. while the mouse button is depressed over it)" and not "When the href attribute's value resolves to the URI of the current page".

There is no pseudo-class that means "When the href attribute's value resolves to the URI of the current page", for that the classic pattern is to add a "current" or "selected" class to the anchor on the server before sending the HTML to the client.


Should be

a.selector:active:hover { color: #777; }

a.selector:hover:active { color: #777; }

NOT

.selector a:active:hover { color: #777; }

.selector a:hover:active { color: #777; }

Simple as that :P


it is not correct and will not work, you need to separate them out.

.selector a:active, .selector a:hover { color: #777; }
0

精彩评论

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