31 users online (1 members and 30 guests)  


  Results 1 to 7 of 7

Related

  1. IFrame troubles    Forum: HTML Forum
    Replies: 3
  2. Traffic Troubles    Forum: Website Promotion Forum
    Replies: 0
  3. Firefox CSS troubles    Forum: CSS Forum
    Replies: 6
  1. #1
    mickeygp's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2003
    Posts
    4

    hyperlink rollover troubles!!!

    I'm wanting to know how to have different coloured rollovers for hyperlinks on the same page.
    I know that you can set hyperlink and rollover attributes in the body of a page. Or you can change the style of each hyperlink separetely on a page (i.e. <a href="www.yahoo.com" style="text-decoration:none; color:#0000FF")
    What I want to know is there some way I can also change the rollover style of the link.
    Basically what I want to do is to have two words next to each other (with links attached) one is in red writing, which rolls over to grey writing. The other is in black writing which rolls over to yellow writing.

    Any help would be much appreciated

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hiya, welcome to the forums.

    Yes, you can do this using Cascading Style Sheets.

    try this CSS Tutorial http://css.somepeople.net as an introduction. Pay special attention to the section on classes, these are what will achieve what you need.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    mickeygp's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2003
    Posts
    4
    Hmmm....
    Still no luck...
    I'm not sure how to define different hyperlink styles in the one style sheet.
    Say I've got this in a style sheet:

    A:link: { text-decoration: underline; color: #FFC889; }
    A:active: { text-decoration: underline; color: #FFC889; }
    A:visited: { text-decoration: underline; color: #FFC889; }
    A:hover: { text-decoration: none; color: white; }

    How can I also define a second hyperlink style in that style sheet so I can have different hyperlink rollover colours on the same web-page

  4. #4
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    You can use classes -
    Code:
    unique.a:link
    {
    color: black;
    }
    
    <a href="blah.html" class="unique">Blah</a>
    try that
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  5. #5
    mickeygp's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2003
    Posts
    4

    Wink

    thanks muchly

  6. #6
    mickeygp's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2003
    Posts
    4
    Quote Originally Posted by mickeygp
    thanks muchly
    Actually,
    Isn't it a:link.unique rather than unique.a:link
    I managed to get the latter to work but not the former

  7. #7
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    My fault, I was drunk

    its

    a.unique:link

    not sure why the other is working

    I was thinking when an A tag is inside an element of class unique, which would be

    .unique a:link

    I should pay better attention
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?



Tags for this Thread