Change href color on hover?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Hi, I just want to change the color when I mouseover an href without a
style sheet. This does not work:

<a href="test.html" style="a:hover { color: #DA8525; }">Test</a>

Is that suppose to work?

Re: Change href color on hover?

On Mon, 02 May 2011 17:31:54 -0400, Ken Williams wrote:

Quoted text here. Click to load it

You'd be better off giving the tag a class or ID name then using the
a:hover there. AFAIK, the {} are not allowed in the inline method.

Re: Change href color on hover?

Quoted text here. Click to load it

OP might be better off classing. But not necessarily.

If he did class, btw, it would not be the tag but the element,
tags are not the sorts of things that can be classed.

The {} in themselves are parked legally, but the parking officer
would give a ticket for the vehicle as a whole - in particular,
noticing the a:hover. Can't have this inline!

So, either

1. If you wanted all anchors on your website to hover red, don't
class, just

a:hover {color: red;}

in an external style sheet linked to in the head of the document

<link rel="stylesheet" type="text/css" href="styles.css">

or in an embedded stylesheet in the head itself, like

<style type="text/css" media="screen">
a:hover {color: red};

2. Class the anchor, especially if it is a *one-off*:

<a class="name" href="test.html">Test</a>

with {color: red;}

3. Class one or other of the anchor's containing elements - in
HTML 4.01 Strict, there needs to be at least one containing
element under body. For example, if you want all links in a
navigational list to hover red, you might target the anchors in
that particular list of a class "nav":

<ul class="nav">
<li><a href="home.html">home</a></li>
<li><a href="siteMap.html">site map</a></li>


.nav a:hover

4. Don't class at all but simply target the anchors you want in
your external or embedded stylesheet. More often than not, in a
website, there are larger than one-off motives. For example, you
might very well want all links in a navigational unordered list
to be without underlining or to hover green or you might want all
the links in paragraphs to hover red. Take the latter case. No
need to class anything: it can be achieved by targeting in the
CSS with such as

p a:hover {
color: red;


Re: Change href color on hover?

Quoted text here. Click to load it

Thanks very much for the explanation.  I've always been very confused
about how to style links.

Richard Fisher

Site Timeline