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?

a:hover{background-color:#003366;color:#fff;text-decoration:none;}

Thank you!

I’m not sure I understand, but they have the border declared as white for a and changed to blue on a:hover:


ul.category a {
    [b]border: 1px solid #FFFFFF;[/b]
    color: #65574D;
    display: inline-block;
    padding: 1px 3px;
}

ul.category a:hover {
    background-color: #E9F7FF;
    [b]border-color: #86B8CE;[/b]
    color: #5A4B3E;
    text-decoration: none;
}

Something like this:


<!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 :slight_smile:

Thanks guys, it worked.