help ! cannot get hover style to take effect

Discussion in 'HTML' started by Dave Brown, Sep 9, 2004.

  1. Dave Brown

    Dave Brown Guest

    Hi all,

    Hoping someone might be able to shed a little light onto my problem,
    I have a page with a linked style sheet and some <A> tags which have the
    class HeaderLink. The style headlink is in effect as the links look
    as expected but I want to specify the hover style as well so in my
    stylesheet I have

    ..HeaderLink {
    blah blah (this works)
    }
    and
    ..HeaderLink a:hover {
    Blah Blah ( this one doesnt take effect )
    }

    Any idea why the hover style doesnt take effect ?

    Thanks,

    Dave
     
    Dave Brown, Sep 9, 2004
    #1
    1. Advertising

  2. Dave Brown

    Steve Pugh Guest

    Dave Brown <> wrote:

    >Hoping someone might be able to shed a little light onto my problem,
    >I have a page with a linked style sheet and some <A> tags which have the
    > class HeaderLink. The style headlink is in effect as the links look
    >as expected but I want to specify the hover style as well so in my
    >stylesheet I have
    >
    >.HeaderLink {
    > blah blah (this works)
    >}
    >and
    >.HeaderLink a:hover {
    > Blah Blah ( this one doesnt take effect )
    >}


    Do you have
    <a class="HeaderLink">...</a>
    or
    <foo class="HeaderLink"><a>...</a></foo>

    The first style matches whichever element has class="HeaderLink" but
    the second style only matches <a> elements that are inside another
    element with class="Headerlink".

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Sep 9, 2004
    #2
    1. Advertising

  3. Dave Brown

    Dave Brown Guest

    I've been taking the <A class="HeaderLink"> approach.

    Steve Pugh wrote:

    > Dave Brown <> wrote:
    >
    >
    >>Hoping someone might be able to shed a little light onto my problem,
    >>I have a page with a linked style sheet and some <A> tags which have the
    >> class HeaderLink. The style headlink is in effect as the links look
    >>as expected but I want to specify the hover style as well so in my
    >>stylesheet I have
    >>
    >>.HeaderLink {
    >> blah blah (this works)
    >>}
    >>and
    >>.HeaderLink a:hover {
    >> Blah Blah ( this one doesnt take effect )
    >>}

    >
    >
    > Do you have
    > <a class="HeaderLink">...</a>
    > or
    > <foo class="HeaderLink"><a>...</a></foo>
    >
    > The first style matches whichever element has class="HeaderLink" but
    > the second style only matches <a> elements that are inside another
    > element with class="Headerlink".
    >
    > Steve
    >
     
    Dave Brown, Sep 9, 2004
    #3
  4. Dave Brown

    rf Guest

    Dave Brown wrote:

    > .HeaderLink a:hover {


    a.Hearlink:hover {

    ..HeaderLink a:hover means an <a> element *within* something that has a class
    of HeaderLink.

    --
    Cheers
    Richard.
     
    rf, Sep 9, 2004
    #4
  5. Dave Brown

    Toby Inkster Guest

    Dave Brown wrote:

    > I've been taking the <A class="HeaderLink"> approach.


    Then why have you been using:

    .HeaderLink a:hover {...}

    ? That means "hovered links inside an element with class HeaderLink". What
    you want is "hovered links with a class HeaderLink":

    a.HeaderLink:hover {...}

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Sep 9, 2004
    #5
  6. Dave Brown

    Dave Brown Guest

    using a.Hearlink:hover has no effect either,
    could it be because the link is in a <td>


    rf wrote:

    > Dave Brown wrote:
    >
    >
    >>.HeaderLink a:hover {

    >
    >
    > a.Hearlink:hover {
    >
    > .HeaderLink a:hover means an <a> element *within* something that has a class
    > of HeaderLink.
    >
     
    Dave Brown, Sep 9, 2004
    #6
  7. Dave Brown

    rf Guest

    Dave Brown

    [top posting corrected. Please do not top post in future]

    > rf wrote:
    >
    > > Dave Brown wrote:
    > >
    > >>.HeaderLink a:hover {


    > > a.Hearlink:hover {


    > using a.Hearlink:hover has no effect either,
    > could it be because the link is in a <td>


    No.

    You must be doing something else wrong. It is now the time for you to supply
    a URL pointing to what you have so for.

    Hang on, I made a typo in that earlier post.

    You *did* use a:Headerlink:hover rather than a:Hearlink:hover didn't you?

    --
    Cheers
    Richard.
     
    rf, Sep 9, 2004
    #7
  8. Dave Brown

    Steve Pugh Guest

    Dave Brown <> wrote:

    Stop top posting or you'll find that a lot of the people here,
    including some of the most knowledgeable, will stop helping you.

    >I've been taking the <A class="HeaderLink"> approach.


    Then you second style won't affect anything.

    a.HeaderLink:hover is the correct selector to use. If that still
    doesn't work you'll need to provide a URL.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Sep 9, 2004
    #8
  9. Dave Brown

    Dave Brown Guest

    Dave Brown wrote:
    > Hi all,
    >
    > Hoping someone might be able to shed a little light onto my problem,
    > I have a page with a linked style sheet and some <A> tags which have the
    > class HeaderLink. The style headlink is in effect as the links look as
    > expected but I want to specify the hover style as well so in my
    > stylesheet I have
    >
    > .HeaderLink {
    > blah blah (this works)
    > }
    > and
    > .HeaderLink a:hover {
    > Blah Blah ( this one doesnt take effect )
    > }
    >
    > Any idea why the hover style doesnt take effect ?
    >
    > Thanks,
    >
    > Dave


    Thanks All, Got it now... I needed .HeaderLink:hover{...}
    I was thinking I still needed a 'a.' somewhere.
    Rgds
    Dave.
     
    Dave Brown, Sep 9, 2004
    #9
  10. Dave Brown

    Els Guest

    Dave Brown wrote:

    > Thanks All, Got it now... I needed .HeaderLink:hover{...}
    > I was thinking I still needed a 'a.' somewhere.


    Well, it wouldn't be a bad idea to state
    a.Headerlink:hover{...}.

    --
    Els
    http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Sep 9, 2004
    #10
    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. jack

    Hover effect in Calender Control

    jack, Jan 2, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    514
    Christopher Reed
    Jan 3, 2006
  2. jack
    Replies:
    8
    Views:
    33,511
    tooMuchCode
    May 12, 2009
  3. Christopher Reed

    Re: Hover effect in Calender Control

    Christopher Reed, Jan 3, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    440
    Christopher Reed
    Jan 3, 2006
  4. windandwaves

    list item (li) hover effect in IE

    windandwaves, Oct 22, 2005, in forum: HTML
    Replies:
    15
    Views:
    948
    Evertjan.
    Oct 24, 2005
  5. rrreee

    link hover effect help

    rrreee, Jun 7, 2007, in forum: HTML
    Replies:
    7
    Views:
    572
    Jonathan N. Little
    Jun 8, 2007
Loading...

Share This Page