Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Change href color on hover?

Reply
Thread Tools

Change href color on hover?

 
 
Ken Williams
Guest
Posts: n/a
 
      05-02-2011
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?
 
Reply With Quote
 
 
 
 
richard
Guest
Posts: n/a
 
      05-02-2011
On Mon, 02 May 2011 17:31:54 -0400, Ken Williams wrote:

> 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?


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.
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      05-03-2011
In article <wz42lcmqy5ky$(E-Mail Removed)>,
richard <(E-Mail Removed)> wrote:

> On Mon, 02 May 2011 17:31:54 -0400, Ken Williams wrote:
>
> > 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?

>
> 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.


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
like

<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};
....
</style>

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

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

with

a.name:hover {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>
....
</ul>

with

..nav a:hover {color:red;}

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;
....
}

--
dorayme
 
Reply With Quote
 
Helpful person
Guest
Posts: n/a
 
      05-03-2011
On May 2, 5:51*pm, dorayme <(E-Mail Removed)> wrote:
>
> 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
> like
>
> <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};
> ...
> </style>
>
> 2. Class the anchor, especially if it is a *one-off*:
>
> <a class="name" href="test.html">Test</a>
>
> with
>
> a.name:hover {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>
> ...
> </ul>
>
> with
>
> .nav a:hover {color:red;}
>
> 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;
> ...
>
> }
>
> --
> dorayme


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

Richard Fisher
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
BASE HREF and A HREF="#" onclick="..." Vincent van Beveren Javascript 2 07-06-2006 08:33 AM
href="javascript:func()" vs href="#" onclick="javascript:func()" CRON HTML 24 06-20-2006 08:05 PM
onClick method question (this.href and document.location.href) yogesh.bhardwaj@gmail.com Javascript 2 02-03-2005 02:38 PM
difference between location.href and window.location.href? saiho.yuen Javascript 3 09-14-2004 06:51 PM
Problem: Setting MSIE iframe innerHTML change relative href/src to absolute href/src Soren Vejrum Javascript 4 07-05-2003 01:47 PM



Advertisments