a:hover and the like

Discussion in 'HTML' started by WindAndWaves, Oct 6, 2004.

  1. WindAndWaves

    WindAndWaves Guest

    Hi Gurus

    I have been reading loads of info on this, but it seems I have read too
    much.


    Can someone help me out and tell me, in simple terms, what I should have on
    my stylesheet for pseudo-classes for the anchor object.

    Eg.

    A { font-size: 15px;}
    A:LINK {color: #123456;}
    A:HOVER{color: #223456;}
    A:VISITED {color: #323456;}

    A.ANOTHER:HOVER {text-decoration: none;}

    Basically, I am a bit unsure about the syntax for the pseudo classes (e.g.
    do you use A:VISITED:HOVER or A:HOVER), and related matters.

    TIA

    - Nicolaas
    WindAndWaves, Oct 6, 2004
    #1
    1. Advertising

  2. WindAndWaves

    brucie Guest

    In alt.html WindAndWaves said:

    > A { font-size: 15px;}


    avoid specifying font sizes in px. consider not specifying any size at
    all so the visitors preferred sizes are used.

    > A:LINK {color: #123456;}
    > A:HOVER{color: #223456;}
    > A:VISITED {color: #323456;}


    they're in the wrong order.

    link
    visited
    hover
    active

    see: http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes

    > A.ANOTHER:HOVER {text-decoration: none;}


    applies to <a class="ANOTHER" ...>

    > Basically, I am a bit unsure about the syntax for the pseudo classes


    http://www.w3.org/TR/REC-CSS2/selector.html#pseudo-elements

    > do you use A:VISITED:HOVER


    doesn't make sense.

    > or A:HOVER)


    will apply to all hovered <a>s

    --
    l i t t l e v o i c e s m a k e m e
    brucie, Oct 6, 2004
    #2
    1. Advertising

  3. WindAndWaves

    bulge Guest

    On Thu, 7 Oct 2004 00:01:03 +1300, "WindAndWaves" <>
    wrote:

    >Hi Gurus
    >
    >I have been reading loads of info on this, but it seems I have read too
    >much.
    >
    >
    >Can someone help me out and tell me, in simple terms, what I should have on
    >my stylesheet for pseudo-classes for the anchor object.
    >
    >Eg.
    >
    >A { font-size: 15px;}
    >A:LINK {color: #123456;}
    >A:HOVER{color: #223456;}
    >A:VISITED {color: #323456;}


    looks good. Could also put the a:active thingy in if you wanted.

    >
    >A.ANOTHER:HOVER {text-decoration: none;}


    looks good. "another" being a class named Another (note the dot)

    >
    >Basically, I am a bit unsure about the syntax for the pseudo classes (e.g.
    >do you use A:VISITED:HOVER or A:HOVER), and related matters.


    a:hover.
    a.visited:hover would probably work if you created a class called
    "visited" (note the dot), but not a:visited:hover (note the colon).
    Dunno if there's a separate hover for visited links, but I doubt it,
    and am too lazy to find out :)

    I could be totally wrong since I found this confusing when starting
    with CSS too, and sometimes I feel I have learned nothing :) so I'm
    happy to be corrected.

    Recent nightmare CSS session has made me loopy. ;)

    >
    >TIA
    >
    >- Nicolaas
    >
    bulge, Oct 6, 2004
    #3
  4. WindAndWaves

    SpaceGirl Guest

    WindAndWaves wrote:
    > Hi Gurus
    >
    > I have been reading loads of info on this, but it seems I have read too
    > much.
    >
    >
    > Can someone help me out and tell me, in simple terms, what I should have on
    > my stylesheet for pseudo-classes for the anchor object.
    >
    > Eg.
    >
    > A { font-size: 15px;}
    > A:LINK {color: #123456;}
    > A:HOVER{color: #223456;}
    > A:VISITED {color: #323456;}
    >
    > A.ANOTHER:HOVER {text-decoration: none;}
    >
    > Basically, I am a bit unsure about the syntax for the pseudo classes (e.g.
    > do you use A:VISITED:HOVER or A:HOVER), and related matters.
    >
    > TIA
    >
    > - Nicolaas
    >
    >


    a.whatever:pseudoclass

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Oct 6, 2004
    #4
  5. WindAndWaves

    Steve Pugh Guest

    brucie <> wrote:
    >In alt.html WindAndWaves said:
    >
    >> do you use A:VISITED:HOVER

    >
    >doesn't make sense.


    Yes it does. :visited and :hover are not mutually exclusive and - a
    link can be bother visited and hovered.

    Under the proposed CSS3 selectors the above is logical and is already
    supported by some browsers.

    >> or A:HOVER)

    >
    >will apply to all hovered <a>s


    Including those that aren't links. Using a:link:hover and
    a:visited:hover means that the hover styles are only applied to links
    not to <a name="foo"> elements.

    The browsers that support :visited:hover are also those that apply
    a:hover to all <a> elements.

    Steve
    Steve Pugh, Oct 6, 2004
    #5
  6. WindAndWaves

    Sid Ismail Guest

    On Thu, 7 Oct 2004 00:01:03 +1300, "WindAndWaves" <> wrote:

    : Hi Gurus
    :
    : I have been reading loads of info on this, but it seems I have read too
    : much.
    :
    :
    : Can someone help me out and tell me, in simple terms, what I should have on
    : my stylesheet for pseudo-classes for the anchor object.
    :
    : Eg.
    :
    : A { font-size: 15px;}
    : A:LINK {color: #123456;}
    : A:HOVER{color: #223456;}
    : A:VISITED {color: #323456;}
    :
    : A.ANOTHER:HOVER {text-decoration: none;}
    :
    : Basically, I am a bit unsure about the syntax for the pseudo classes (e.g.
    : do you use A:VISITED:HOVER or A:HOVER), and related matters.


    CSS pseudo-classes

    A.blue:visited {color: #003399;}
    A.blue:link {color: #003399;}
    A.blue:active {color: #003399;}
    A.blue:hover {color: red;}

    A.white:visited {color: #ffffff;}
    A.white:link {color: #ffffff;}
    A.white:active {color: #ffffff;}
    A.white:hover {color: red;}

    and then -

    <a href="blah1.html" class="blue">Blue Link</a>
    <a href="blah2.html" class="white">White Link</a>


    Sid
    Sid Ismail, Oct 6, 2004
    #6
  7. Quoth the raven Sid Ismail:

    > CSS pseudo-classes
    >
    > A.blue:visited {color: #003399;}
    > A.blue:link {color: #003399;}
    > A.blue:active {color: #003399;}
    > A.blue:hover {color: red;}
    >
    > A.white:visited {color: #ffffff;}
    > A.white:link {color: #ffffff;}
    > A.white:active {color: #ffffff;}
    > A.white:hover {color: red;}


    Las Vegas Has Animals

    link
    visited
    hover
    active

    If not in this order, will not work as you wish.

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Oct 6, 2004
    #7
  8. WindAndWaves

    WindAndWaves Guest

    "WindAndWaves" <> wrote in message
    news:4gQ8d.10406$...
    > Hi Gurus
    >
    > I have been reading loads of info on this, but it seems I have read too
    > much.
    >
    >
    > Can someone help me out and tell me, in simple terms, what I should have

    on
    > my stylesheet for pseudo-classes for the anchor object.
    >
    > Eg.
    >
    > A { font-size: 15px;}
    > A:LINK {color: #123456;}
    > A:HOVER{color: #223456;}
    > A:VISITED {color: #323456;}
    >
    > A.ANOTHER:HOVER {text-decoration: none;}
    >
    > Basically, I am a bit unsure about the syntax for the pseudo classes (e.g.
    > do you use A:VISITED:HOVER or A:HOVER), and related matters.
    >
    > TIA
    >
    > - Nicolaas
    >
    >



    Thank you for all your replies.

    So what I learn is that it actually matters what sequence the items are in.
    I never knew that css actually needs to have a special sequence, is that
    true? I thought the cascading referred to the hierarchy within the HTML
    page only.

    Thank you once more. I would still be keen to hear if my idea listed above
    is true?

    - Nicolaas
    WindAndWaves, Oct 6, 2004
    #8
  9. WindAndWaves

    brucie Guest

    In alt.html WindAndWaves said:


    > I never knew that css actually needs to have a special sequence, is that
    > true?


    yes

    6 Assigning property values, Cascading, and Inheritance
    http://www.w3.org/TR/REC-CSS2/cascade.html


    --
    l i t t l e v o i c e s m a k e m e
    brucie, Oct 6, 2004
    #9
  10. In news:t6Y8d.139754$,
    Beauregard T. Shagnasty <> walked into the bar
    with a grape in each nostril and said to the bartender:

    :: Las Vegas Has Animals

    And here I thought it was "Leave Valerie's Hoo-hoo Alone"

    -- Matt
    Matt-The-Hoople, Oct 7, 2004
    #10
  11. Quoth the raven Matt-The-Hoople:

    > In news:t6Y8d.139754$,
    > Beauregard T. Shagnasty <> walked into the bar
    > with a grape in each nostril and said to the bartender:
    >
    > :: Las Vegas Has Animals
    >
    > And here I thought it was "Leave Valerie's Hoo-hoo Alone"


    Beauregard took the grapes out of his nose and said:

    "But this here is a family forum!"

    --
    -bts
    -This space intentionally left ordering a Grey Goose.
    Beauregard T. Shagnasty, Oct 7, 2004
    #11
  12. .oO(Steve Pugh)

    >brucie <> wrote:
    >>In alt.html WindAndWaves said:
    >>
    >>> do you use A:VISITED:HOVER

    >>
    >>doesn't make sense.

    >
    >Yes it does. :visited and :hover are not mutually exclusive and - a
    >link can be bother visited and hovered.
    >
    >Under the proposed CSS3 selectors the above is logical and is already
    >supported by some browsers.


    Already part of CSS2 and supported by all recent browsers.

    Micha
    Michael Fesser, Oct 7, 2004
    #12
  13. .oO(Beauregard T. Shagnasty)

    >link
    >visited
    >hover
    >active
    >
    >If not in this order, will not work as you wish.


    At least the order of :link and :visited doesn't matter. Both are
    mutually exclusive, so both LVHA and VLHA will work.

    Micha
    Michael Fesser, Oct 7, 2004
    #13
  14. .oO(WindAndWaves)

    >So what I learn is that it actually matters what sequence the items are in.
    >I never knew that css actually needs to have a special sequence, is that
    >true? I thought the cascading referred to the hierarchy within the HTML
    >page only.


    More than one pseudo-classes (up to three, maybe even more) may apply to
    an element at the same time. That's why the order is important in this
    case.

    Micha
    Michael Fesser, Oct 7, 2004
    #14
  15. In news:UF%8d.286481$,
    Beauregard T. Shagnasty <> walked into the bar
    with a grape in each nostril and said to the bartender:
    :: Quoth the raven Matt-The-Hoople:
    :::
    ::::: Las Vegas Has Animals
    :::
    ::: And here I thought it was "Leave Valerie's Hoo-hoo Alone"
    ::
    :: Beauregard took the grapes out of his nose and said:
    ::
    :: "But this here is a family forum!"

    .... and then there was brucie looking for PHP's giggly bits ...

    -- Matt
    Matt-The-Hoople, Oct 7, 2004
    #15
  16. WindAndWaves

    Steve Pugh Guest

    On Thu, 07 Oct 2004 03:04:44 +0200, Michael Fesser <>
    wrote:

    > .oO(Steve Pugh)
    >
    >>brucie <> wrote:
    >>>In alt.html WindAndWaves said:
    >>>
    >>>> do you use A:VISITED:HOVER
    >>>
    >>>doesn't make sense.

    >>
    >>Yes it does. :visited and :hover are not mutually exclusive and - a
    >>link can be bother visited and hovered.
    >>
    >>Under the proposed CSS3 selectors the above is logical and is already
    >>supported by some browsers.

    >
    >Already part of CSS2 and supported by all recent browsers.


    Whoops, yes, and does 'recent' include IE? My recollection was that it
    didn't in this case, but I'm not sure.

    Steve
    Steve Pugh, Oct 7, 2004
    #16
  17. WindAndWaves

    Toby Inkster Guest

    Beauregard T. Shagnasty wrote:

    > link
    > visited
    > hover
    > active
    >
    > If not in this order, will not work as you wish.


    For certain values of "as you wish".

    There will be situations where, for example, LHVA may be more useful
    (perhaps in situations where it's very important to know which links have
    been visited before)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Now Playing ~ ./ryan_adams/gold_uk_version/08_nobody_girl.ogg
    Toby Inkster, Oct 7, 2004
    #17
  18. WindAndWaves

    rf Guest

    Steve Pugh

    > Whoops, yes, and does 'recent' include IE?


    IE is *not* a recent browser.

    --
    Cheers
    Richard.
    rf, Oct 7, 2004
    #18
  19. WindAndWaves

    WindAndWaves Guest

    "rf" <rf@.invalid> wrote in message
    news:Au69d.17000$...
    > Steve Pugh
    >
    > > Whoops, yes, and does 'recent' include IE?

    >
    > IE is *not* a recent browser.
    >
    > --
    > Cheers
    > Richard.
    >
    >


    If internet explorer is not a recent browser, then what is? Most people are
    using IE so we probably have to take that into consideration for commercial
    applications.

    - Nicolaas
    WindAndWaves, Oct 7, 2004
    #19
  20. WindAndWaves

    WindAndWaves Guest

    "Michael Fesser" <> wrote in message
    news:...
    > .oO(WindAndWaves)
    >
    > >So what I learn is that it actually matters what sequence the items are

    in.
    > >I never knew that css actually needs to have a special sequence, is that
    > >true? I thought the cascading referred to the hierarchy within the HTML
    > >page only.

    >
    > More than one pseudo-classes (up to three, maybe even more) may apply to
    > an element at the same time. That's why the order is important in this
    > case.
    >
    > Micha




    Thank you all so much for your comments. Really appreciate it.

    - Nicolaas
    WindAndWaves, Oct 7, 2004
    #20
    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. Erik Harris

    CSS :hover and Internet Explorer 6?

    Erik Harris, Jun 25, 2003, in forum: HTML
    Replies:
    6
    Views:
    78,622
    Erik Harris
    Jun 26, 2003
  2. Jochen Fuhrmann

    css: a:hover and images

    Jochen Fuhrmann, Sep 18, 2003, in forum: HTML
    Replies:
    6
    Views:
    7,163
    William Tasso
    Sep 18, 2003
  3. Patrick Kowalzick
    Replies:
    5
    Views:
    469
    Patrick Kowalzick
    Mar 14, 2006
  4. Thierry Lam
    Replies:
    1
    Views:
    331
    Jonathan N. Little
    Aug 9, 2007
  5. Jan Clemens Faerber
    Replies:
    2
    Views:
    548
    Jan Clemens Faerber
    Apr 5, 2013
Loading...

Share This Page