How Can I Make A:Hover (In CSS) Work With Visited Links?

a:hover tag applies to the links
only when they have not been clicked before.

(when a user clicks on the link, goes to the next page and then comes back to
the same page, the link will not look as it was originally)

i tried disabling this by using the same prameters in a:link but the a:hover
stopped working. is there any way to make it work with visited links? or is
there any other tag that has the same effect as a:hover?

Here are the CSS a: classes.

a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */

These need to be defined in this order or it won’t work (according to the
w3schools).

A:Visited {
font-family:verdana;
font-weight:bold;
color:black;
text-decoration:none;
}

Here are the CSS a: classes.

a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */

These need to be defined in this order or it won’t work (according to the
w3schools).

just an added tip

your link psuedo classes must be in the following order or they will cause
trouble in some browsers

:link
:visited
:hover
:active

I’ve recently been playing w/
this same scenerio as I build the new site for OU Sooners e-comm site and one
trick is to make sure you have link elements listed in this order because after
all you’re working w/ “Cascading” SS ( in short make sure a:hover is
listed after a:visited)

a link
a visted
a hover

Dont forget you can always set a .class style you like for your text links
before hand (i.e enclosed in a div tag) then after your links take on thier
style you can apply an inline style to your links. ( if that makes anysense at
all)

What browser are you using?
a:hover works the same on visited and unvisited links in IE6 and Firefox 1.5.
Obviously the hover style has to be different from the link or visited style to
be visible.

If you define a:visited {} with
the same styles as the as a {} then your links should always look the same and
a:hover {} should work just fine.

you have to make sure there is no
a:visited set in your style sheets anywhere.

If that doesn’t work you will have to use JavaScript, which can get
complicated.


Posted in CSS, Web Design and tagged , , by with 2 comments.

Comments