Ottenere un: hover per regolare più di una classe / id

Question

Ho avuto difficoltà a far funzionare qualcosa e ho già cercato un sacco di posti, qualsiasi aiuto è stato molto apprezzato.

Fondamentalmente ho un menu di navigazione composto da alcune immagini di rollover (stato normale 'sinistra in alto', stato al passaggio del mouse 'sinistra in basso', sono attualmente configurate per il rollover individualmente tramite CSS - queste hanno questo aspetto:

<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.

Quello che sto cercando di ottenere è che tutti si ribaltino quando ci passo sopra.Quindi diciamo che ho passato il mouse sugli "archivi";quanto segue rimanda a "archivi, contatti, informazioni su"

Ho già provato quanto segue e non ha funzionato (la clausola di opacità ha fatto esattamente quello che volevo che facesse, ma per qualche motivo questo non sembra funzionare per "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} 

Come dovrei fare per raggiungere questo obiettivo?grazie in anticipo per qualsiasi aiuto!

Answer 1

ohnno,

Eri sulla strada giusta, ma non funziona a causa di requisiti di specificità.Prova a seguire questa strada:

#menu:hover a { background-position: left bottom; opacity:0.5; }

Se ancora non funziona, prova:

#menu:hover li a { background-position: left bottom; opacity:0.5; }

Infine, puoi anche applicare un! important alla regola per farla rispettare.! important è un flag speciale per CSS che dice al browser "Questo sovrascrive qualsiasi cosa tu possa pensare" (più o meno). Ecco un esempio:

#menu:hover li a { background-position: left bottom !important; opacity:0.5; }

Per ulteriori informazioni sulla specificità, consulta questo articolo suW3C.In breve, la specificità definisce quali stili vengono utilizzati e in quali momenti.Lo stile dell'elemento applicato è definito, regola per regola, dallo stile con la massima specificità per ciascuno degli stili applicabili.

FuzzicalLogic

Answer 2

left-bottom potrebbe non cambiare abbastanza in modo da non notare il cambiamento.provare giusto?