- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
Just add:
ul#nav li.home a:hover {
background: url(images/nav-home-hover.jpg) bottom center no-repeat; /* Your hover img*/
}
Also, you should look at this video: https://css-tricks.com/video-screencasts … s-sprites/