dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: different hover links

  1. #1
    Join Date
    Apr 2006
    Posts
    84

    different hover links

    hey guys...i have this site...i have a css for this site...

    http://www.roxcap.com/index.html

    the hover links on this home page need to be different from the hover links on this page

    http://www.roxcap.com/Investment_Str.../balanced.html

    right now this is what my hover styles looks like...


    .textbody {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #373636;
    text-decoration: none;
    }

    TD A:hover {
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    color: #ff0000;
    line-height: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    }
    a.bartitle{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
    }

    a.bartitle:hover{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: uppercase;
    color: #90B087;
    text-decoration: none;
    }


    how do i do this? the hover links in the content area of the sub pages need to be the same size as the content in the subpages...how do i reference a different size and color of fonts in the stylesheet when there already is one by TD A:hover?
    Last edited by drew68; 06-22-2006 at 07:15 PM.

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    -I always get this warm, fuzzy feeling when I see a web page that has tables nested inside of tables nested inside of tables nesting inside of more tables.

    (Okay, -it works. -But I'd enjoy the challenge of re-doing this to a table-less *CSS-only design!)

    To answer your question, to get certain hover-links to behave differently than the default style for TD a:hover, create a new CLASS. So the 'special links' would include a [CLASS="special_links"] in the HTML, and in the CSS, add [.special_links {selector:declaration; property-value; etc}]

    Notice the "dot" before "special_links", above. Make it a dot ("class") because you're sharing this with multiple instances of useage.

    -Joel
    Last edited by WebJoel; 06-22-2006 at 07:31 PM.

  3. #3
    Join Date
    Apr 2006
    Posts
    84
    hey webjoel...yea ya...i'm a nub lol

    well i'm a bit confused...i did what you said for the most part but check out the 'fact sheet' link now...

    http://www.roxcap.com/Investment_Str.../balanced.html

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by drew68
    hey webjoel...yea ya...i'm a nub lol

    well i'm a bit confused...i did what you said for the most part but check out the 'fact sheet' link now...

    http://www.roxcap.com/Investment_Str.../balanced.html
    No no, -respect! Respect! -I used to build with TABLEs too. But now, I pick my battles. -And building HTML with tables isn't one of them.

    Okay, -what about 'fact sheet'? That's your *pdf. What is supposed to happen? A hover-state change, or what? Currently, I see no change in any navigation link in either IE or Fx. Is there supposed to be something that changes? Is this the problem?

  5. #5
    Join Date
    Apr 2006
    Posts
    84
    yea...maybe i'm not clear in what i'm asking for

    sorry.

    okay...see the home page the links in the 3 bar sections...if you roll over them there red. that's fine....it's suppose to.

    but in these pages here

    http://www.roxcap.com/Investment_Str.../balanced.html

    the 'fact sheet' and the Portfolio Manager links should be the same font size as the rest of the text copy on that page...which is arial 12.

    the links on the home page are arial 11 and when you hover over them...it's red...that's exactly how i want the links on the balance.html page to be....but it has to be arial 12.

    so in my stylesheet i'm referencing the hover link to be....

    TD A:hover {
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    color: #ff0000;
    line-height: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    }



    but i also need to reference the other links on the sub pages to be font-size: 12px....arial....etc.

    i created another class as you suggested and called it special_links. and i went to the balanced.html page and called for the fact sheet to be <class="special_links"> but when i roll over the fact sheet it's calling for the arial 11px. when it should be a new hover style of arial 12px.

    wow that was a mouthful lol i'm sorry this is confusing!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles