Hallo there. First post on css-tricks.
Following question:
I have multible tabs that change background on hover, if visted and if active. The tabs are connected to a sheet. I want the sheet to change color or image when one of the tabs have been hovered. so that the sheet changes backround when i hover over a tab. Sounds simple but i cannot get it to work.
A bit of code that i have allready used:
html.
<ul id="nav">
<li class="home"><a href="#">home</a></li>
<li class="rss"><a href="#">rss</a></li>
<li class="products"><a href="#">products</a></li>
<li class="links"><a href="#">links</a></li>
<li class="contact"><a href="#">contact</a></li>
<li class="offshore"><a href="#">Offshore</a></li>
</ul>
css
ul#nav {
position:relative;
}
ul#nav li {
display: inline;
}
ul#nav li a {
position:relative;
height: 30px;
text-indent: -9999px;
float: left;
}
ul#nav li.home a {
width: 110px;
background: url(images/nav-home.jpg) bottom center no-repeat;
}
the whole list and then..
ul#nav li a:active{
background-position: center center;
}
#nav li a:hover {
background-position: top center;}
Is this possible without using JS
