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!
system
March 14, 2011, 11:28am
2
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;
}
PaulOB
March 14, 2011, 11:34am
3
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