Hi,
I've got a horizontal site nav and the nav items are separated with a 1px border-right.
HTML Code:
<ul class="sitenav">
	<li id=""><a href="" id="">One</a></li>
	<li id="" class="current"><a href="" id="">Two</a></li>
	<li id=""><a href="" id="">Three</a></li>
	<li id=""><a href="" id="">Four</a></li>
	<li id=""><a href="" id="">Five</a></li>
	<li id=""><a href="" id="">Six</a></li>
</ul>
When I hover over a nav item I want the border to be the same colour as background colour of the hovered nav item. This is easy to do with the hover's border-right (through css), but I would also have to do it with the border-right of the left neighbour. I did the following with jquery to accomplish this:

Code:
<script type="text/javascript" language="javascript">
	$(function(){
		$("#asd ul li:not(.current) a").hover(
			function(){
					$(this).parent().prev("li:not(.current)").children().css("border-right","1px solid #00426F");
				}
			, function(){
					$(this).parent().prev("li:not(.current)").children().css("border-right","1px solid #DBDBDB");
				}
		);
		
		$("#asd ul li:not(.current) a").active(
			function(){
					$(this).parent().prev("li:not(.current)").children().css("border-right","1px solid red");
				}
			, function(){
					$(this).parent().prev("li:not(.current)").children().css("border-right","1px solid green");
				}
		);
		
		$('#asd ul li.current').prev().children().css("border-right","1px solid #FFF");
	});
</script>
The problem is that it doesn't fully work. Sometimes the border-right of currently hovered over item doesn't change colour (NOT it's previous neighbours). I assume this is because next neighbour has hijacked it's border-right.

Secondly, it doesn't work at all with :active mode.... i.e. when pressed.