Need CSS Text Color for A:Hover to Take Precedence Over A:Visited

Need CSS text color for a:hover to take precedence over a:visited

I think specifying the style data for :hover after the style data for :visited is enough to do the trick:

a:visited{  
    color:#3399cc;  
}  
a:hover{  
    background-color:#3399cc;  
    color:#ffffff;  
}

Why should always a:hover come after a:link and a:visited?

Given CSS selectors that are equally specific, rules are applied in order.

If an anchor is both a link and hovered, then both rules will apply.

a:hover { color: blue; }
a:link { color: red; }

It is hovered so it is blue, but it is a link, so the blue is overwritten with red.

That makes the hover rule more-or-less pointless.

Why a:hover does not work , if it is not declared in correct order in style sheet?

This is how CSS works (order is important). For styling links the order for pseudo-classes is:

1. Link (applied if you have not visited this URL)
2. Visited (applied if you've visited the URL the href points to)
3. Hover (applied if the mouse is hovering over the tag)
4. Active (applied if you are interacting with the tag - pressing mouse down, etc)

The reason why order is important is because of CSS Specificity. The rules you've written all have the same specificity, and therefore will be affected by order (rules written last will override earlier written rules).

Note that :hover will not work with those using a keyboard. You can provide those users with the same experience by using the :focus pseudo-class.

a:link {

  color: blue;

  text-decoration: none;

}

a:visited {

  color: purple;

}

a:hover,

a:focus {

  text-decoration: underline;

}

a:active {

  color: red;

}

<a href="#">This is a link</a>

CSS same style for a:link a:visited a:hover a:active, really have to write it all out 4 times

Just forget the pseudo-classes, and select only a:

.DT_compare a {
    font-family:"Lucida Grande", Arial, sans-serif;
    font-size:11px;
    line-height:14px;
    font-weight:normal;
    font-style:normal;
    color:#EEE;
    text-align:center;
}

This isn't a very specific selector though; if necessary you can find some other way to increase it so it overrules your a:hover and a:active selectors, or go with whoughton's answer instead and just specify all four of them.

Then again, if your main hyperlink styles apply to a:hover and a:active without anything before them, as long as you place your .DT_compare a rule beneath them it should work fine.

html link hover not working after link visited?

@Frits van Campen is correct, the visited pseudo-class selector is overriding the hover selector, this fiddle has it fixed.

a:link {
    color: gray;
}
a:active {
    color: #9999ff;
}
a:visited {
    color: gray;
}
a:hover {
    color: #9999ff;
}

Overriding :visited overrides :link :hover :active

I believe it has to do with CSS priority order.

Because #special is an ID, it dwarfs any element-level style applied. (This can be proven in Firefox Firebug/Chrome Inspector and how the inherited style sheets are all over-written by the ID's style).

Though, considering there is no "present style" applied for :active, :visited, etc. It would stand to reason these styles would still be un-affected. Yet, making the following change to your hover seems to kick it back in to gear:

a:hover { color: green !important; }

Why are certain CSS properties not applied to a:visited?

You're not doing anything wrong - it just doesn't work that way (anymore). Styling of :visited was used as a security hole, so browser manufacturers basically eliminated alternate styling for :visited except for a handful of properties (e.g. 'color', 'background-color')

See: http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

Why does a:hover get overriden in CSS?

The :link pseudo class applies to the link even when you are hovering over it. As the style with the id is more specific it overrides the others.

The only reason that the :hover style overrides the :link style at all is that it comes later in the style sheet. If you place them in this order:

a:hover { color: red; }
a:link { color: blue; }

the :link style is later in the style sheet and overrides the :hover style. The link stays blue when you hover over it.

To make the :hover style work for the black link you have to make it at least as specific as the :link style, and place it after it in the style sheet:

a:link { color: blue; }
a:hover { color: red; }
#someID a:link { color: black; }
#someID a:hover { color: red; }

:hover{} precedence in gecko

I think a:visited ends up being more specific than :hover since it has a tagname as well... your "#" links might not get flagged as visited?

---

Related Topics