you can achieve this use regular javascript style properties and onmouseover events.
Or with the :hover pseudoclass in css for smarter browsers. Hell... since all the items seem to be clickable you could just use anchors and then it would even work in IE6.
One thing to note when changing the border of elements - at least when working with standards-compliant browsers and using a proper doctype - the border on an element will attribute to the total space that element uses. For instance, if you have box that is 10x10 but it has a 1px border, then it's actually a 12x12 box when you include the border. Margins (space outside the box) and padding (space inside the box) also affect the total size of an item.
What this effectively means is that if you use the :hover pseudoclass to change the width of the border of an element on the page, you will likely see the element jump around on the page as it's total size is changing. However, if you'd like to get that element to stay in once place, one easy trick is to adjust the margin of the item by the difference so that it stays in place.
Here's an example of what I'm talking about:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript"></script>
<style type="text/css">
* {
border:0px;
margin:0px;
padding:0px;
}
ul {
list-style-type:none;
clear:left;
}
ul li {
float:left;
width:100px;
}
ul li a {
display:block;
height:20px;
line-height:20px;
text-decoration:none;
border:1px solid black;
text-align:center;
margin:5px;
}
ul li a:hover {
border:3px solid gray;
}
ul#static li a:hover {
margin:3px;
}
</style>
</head>
<body>
<ul id="static">
<li>
<a href="[URL unfurl="true"]http://www.google.com">Google</a>[/URL]
</li>
<li>
<a href="[URL unfurl="true"]http://www.tek-tips.com">Tek-Tips</a>[/URL]
</li>
<li>
<a href="[URL unfurl="true"]http://www.playboy.com">Good[/URL] Times</a>
</li>
</ul>
<ul id="jumpy">
<li>
<a href="[URL unfurl="true"]http://www.google.com">Google</a>[/URL]
</li>
<li>
<a href="[URL unfurl="true"]http://www.tek-tips.com">Tek-Tips</a>[/URL]
</li>
<li>
<a href="[URL unfurl="true"]http://www.playboy.com">Good[/URL] Times</a>
</li>
</ul>
</body>
</html>
If you copy/paste the example into a new html file you'll see that the top row does not make the links jump around, but the bottom row does. The difference is that when the top row is hovered over, 2 pixes are removed from it's margin to accomodate for the extra 2 pixels that are added to the border.
-kaht
Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B> bites again.[/small]
