SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background-color Border stroke in hyperlinks

    Hi, can someone help me achieve what Washington DC Classifieds - Free Classifieds Ads for Washington DC, District of Columbia, Virginia, Maryland at eBay Classifieds (Kijiji). does when you highlight a category. They have a stroke around the background-color. What is the syntax to do this with CSS?

    Code:
    a:hover{background-color:#003366;color:#fff;text-decoration:none;}
    Thank you!

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure I understand, but they have the border declared as white for a and changed to blue on a:hover:
    Code:
    ul.category a {
        border: 1px solid #FFFFFF;
        color: #65574D;
        display: inline-block;
        padding: 1px 3px;
    }
    
    ul.category a:hover {
        background-color: #E9F7FF;
        border-color: #86B8CE;
        color: #5A4B3E;
        text-decoration: none;
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    ul {
        list-style:none;
        margin:0;
        padding:0;
    }
    ul.category a {
        border: 1px solid #FFFFFF;
        color: #65574D;
        display: inline-block;
        padding: 1px 3px;
        text-decoration:none;
    }
    ul.category a:hover {
        border:1px solid blue;
        background:#fcf;
    }
    </style>
    </head>
    <body>
    <ul class="category">
        <li><a href="#">Test</a></li>
        <li><a href="#">Testing </a></li>
        <li><a href="#">Testing again</a></li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test 2 </a></li>
        <li><a href="#">Test 3</a></li>
    </ul>
    </body>
    </html>
    When you add a border on hover you really don't want the page to reflow as it will jump around so you place a border on the element by default in the current background color. When you hover you just change its color and it works smoothly.

    The display:inline-block is needed so that vertical padding and borders are handled correctly.

    Edit:


    Beaten to the punch by noonnope

  4. #4
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, it worked.


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
  •