global COLOR opacity hover overlay?

Question

I'm using the below for a global link opacity overlay.

a:hover {
    text-decoration: none;  opacity: 0.6; /* css standard */
    filter: alpha(opacity=60); /* internet explorer */
} /* mouse over link */

How can I add color to this? Is this possible with CSS or am I looking at a JS / jQuery solution only?

Answer 1

a:hover{
    /* your stuff here */
    color:#f00;                // older browsers
    color: rgba(255,0,0,0.4);  // browsers with rgba support (r,g,b,alphaOpacity)
}

Answer 2

If you want the colour eg black to be on the background then your code will be

a:hover {text-decoration: none;  opacity: 0.6; /* css standard */
filter: alpha(opacity=60); /* internet explorer */ /* mouse over link */ background: #000; }

and if you want the a tag to have a colour of eg black then your css will look like this

a:hover {text-decoration: none;  opacity: 0.6; /* css standard */
filter: alpha(opacity=60); /* internet explorer */  /* mouse over link */ color: #000; }

for some reason you have an extra } in your code.

Answer 3

It seems you dont need opacity at all. The effect you are searching for is a tranparent background. Use rgba() with a rgb() fallback and define a transparent background instead.

a:hover {
    text-decoration: none;  
    background: rgb(255,0,0) /* fallback */
    background: rgba(255,0,0,0.6) /* red with 60% opactiy */
    color: #000;
}