Been struggling with getting something to work and I've looked a bunch of places already, any help greatly appreciated.
Basically I have a nav menu that is made up of a few rollover images (normal state 'left top', hover state 'left bottom', they are currently configured to rollover upon over individually via css - these look like this:
<ul id="menu">
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="archives">Archives</a></li>
<li><a href="#" class="contact">Contact</a></li>
<li><a href="#" class="about">About</a></li>
</ul>
#menu {
list-style: none;
padding: 0;
margin: 0 auto;
height: 24.6em;
width: 79em;
position: relative;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;}
#menu .home {
width: 520px;
height: 124px;
background: url(images/Home Menu.png) no-repeat;
left: 0px;
top: 122px;
}
#menu .archives {
width: 263px;
height: 57px;
background: url(images/Archives Menu.png) no-repeat;
left: 0px;
top: 189px;
}
and so on for the rest of the links.
Now what I'm trying to achieve, is to have all of them roll over when I hover any of them. So say I hovered over "archives"; the following would roll over "archives, contact, about"
I've already tried the following and it didn't work (the opacity clause did exactly what I wanted it to do, but for some reason this doesn't seem to work for "background-position"):
#menu:hover .archives {background-position: left bottom; opacity: 0.5}
#menu:hover .contact {background-position: left bottom; opacity: 0.5}
#menu:hover .about {background-position: left bottom; opacity: 0.5}
How would I go about achieving this? thanks in advance for any help!
ohnno,
You were on the right track, but its not working due to specificity requirements. Try going this route:
#menu:hover a { background-position: left bottom; opacity:0.5; }
If it is still not working, try:
#menu:hover li a { background-position: left bottom; opacity:0.5; }
Finally, you may also apply an !important to the rule to enforce the rule. !important is a special flag for CSS that tells the browser "This overrides whatever you may think" (kinda).Here is an example:
#menu:hover li a { background-position: left bottom !important; opacity:0.5; }
For more information on specificity, check out this article at the W3C. In short, specificity defines which styles are used at which times. Applied Element Style is defined, on a rule by rule, by the style with highest specificity for each of the styles that may apply.
FuzzicalLogic