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.

HowTo make a background image clickable (link) using CSS

Everyone is telling you this isn’t possible, perhaps because of their attention to precise semantics. No, you can’t literally make a background image clickable, since a background image isn’t an entity that can possess a behavioral property the way CSS is organized. But you can certainly apply a background image to a link, and without needing any transparent image overlays:
#backgroundlink
{
display: block;
height: 100px; (height of the background image)
width: 200px; (width of the background image)
background-image: url(logo.jpg);
}
…

The anchor tag is naturally inline so you need to make it a block in order to hold a shape without inner content. The height & width are those of the image.
To make this work in a non-CSS user agent as well, you might want to add something like this:
#bglink span
{
display: none;
}
…

Click my logo

If CSS isn’t enabled, the text link replace the image link.
Click here to see a good explanation of similar technics

Interactive Color Picker

If you need an interactive color picker, just check here


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