Change href color on hover?

Discussion in 'HTML' started by Ken Williams, May 2, 2011.

  1. Ken Williams

    Ken Williams Guest

    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?
    Ken Williams, May 2, 2011
    #1
    1. Advertising

  2. Ken Williams

    richard Guest

    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.
    richard, May 2, 2011
    #2
    1. Advertising

  3. Ken Williams

    dorayme Guest

    In article <wz42lcmqy5ky$>,
    richard <> 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
    dorayme, May 3, 2011
    #3
  4. On May 2, 5:51 pm, dorayme <> 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
    Helpful person, May 3, 2011
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. VB Programmer

    Change cell color when hover

    VB Programmer, Jun 11, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    3,808
    VB Programmer
    Jun 11, 2004
  2. Rahul
    Replies:
    7
    Views:
    3,799
    Jonathan N. Little
    Jul 24, 2009
  3. Soren Vejrum
    Replies:
    4
    Views:
    568
    Lasse Reichstein Nielsen
    Jul 5, 2003
  4. Gary
    Replies:
    13
    Views:
    576
  5. Krys

    Change link color on div hover

    Krys, Jun 7, 2009, in forum: Javascript
    Replies:
    20
    Views:
    501
    Thomas 'PointedEars' Lahn
    Jun 10, 2009
Loading...

Share This Page