SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist jkh1978's Avatar
    Join Date
    May 2001
    Location
    Northern Virginia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css background link

    I noticed on some sites that when you hover over a link, the background color changes, "highlighting" the text. How is this done?

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's called a "pseudo-class" and it's done like so:

    a:link { font-family: Arial; color: #FFFFFF; font-size: 9pt; font-weight: bold; }
    a:hover { font-family: Arial; color: #66FF00; font-size: 9pt; font-weight: bold; }
    a:visited { font-family: Arial; color: #666666; font-size: 9pt; font-weight: bold; }
    a:visited:hover { font-family: Arial; color: #66FF00; font-size: 9pt; font-weight: bold; }
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Evangelist jkh1978's Avatar
    Join Date
    May 2001
    Location
    Northern Virginia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im sorry, I wasnt clear. I knew about hover, but there are some sites (www.wc3.org) that will change not the text color, but the color around the text. Looks like you took a highlighter pen to it.

    How is that affect done?

  4. #4
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using the same code, simply add background-color: your color; to the hover state
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  5. #5
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so:

    Code:
    a:hover {color: #ffffff; background-color: #000000; text-decoration: none;}
    for example...

    It is also possible they are doing it in for e.g. a table cell, which would be this:

    Code:
    <td onmouseover="this.style.background='#000000'" onmouseout="this.style.background='#ffffff'">
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky


Bookmarks

Posting Permissions

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