Usa: passa il mouse per modificare il css di un'altra classe?

Question

C'è un modo per modificare il css per una classe quando si passa il mouse su un elemento di un'altra classe usando solo css?

Qualcosa di simile:

.item:hover .wrapper { /*some css*/ } 

Solo 'involucro' non è dentro 'voce', è da qualche altra parte.

Io davvero non voglio usare javascript per qualcosa di così semplice, ma se devo, come lo farei? Ecco il mio tentativo fallito:

document.getElementsByClassName('item')[0].onmouseover="document.getElementsByClassName('wrapper')[0].style.background="url('some url')";"; 

C'è solo un elemento di ogni classe. Non so perché non hanno usato gli ID quando hanno creato il modello, ma è proprio così e non posso cambiarlo.

[Edit]

E 'un menu. Ogni elemento del menu ha una classe distinta. Quando si passa con il mouse sull'elemento, viene visualizzato un sottomenu a destra. È come una sovrapposizione, quando uso lo strumento "Ispeziona elemento", posso vedere che l'intero sito Web html cambia quando il sottomenu è attivo (il che significa che non c'è altro che il sottomenu). La classe che chiamo 'wrapper' ha il css che controlla lo sfondo per il sottomenu. Non c'è davvero alcuna connessione che io possa vedere tra le due classi.

Answer 1

Al momento non è possibile in CSS, a meno che non si desideri selezionare un elemento figlio o fratello (banale e descritto in altre risposte qui).

Per tutti gli altri casi è necessario JavaScript. jQuery e framework come Angular possono affrontare questo problema con relativa facilità.

[Edit]

Con il nuovo CSS (4) Selettore :has(), sarete in grado di indirizzare elementi padre/classi, rendendo una soluzione CSS sola praticabile in un prossimo futuro!

Answer 2

Fornito. Wrapper è all'interno di .item, e fornito non sei in IE 6 o. È un tag, il CSS che hai dovrebbe funzionare bene. Hai prove per suggerire che non lo è?

EDIT:

CSS da sola non può influenzare qualcosa che non in esso contenute. Per rendere questo accada, formattare il vostro menu in questo modo:

<ul class="menu"> 
    <li class="menuitem"> 
     <a href="destination">menu text</a> 
     <ul class="menu"> 
      <li class="menuitem"> 
       <a href="destination">part of pull-out menu</a> 
... etc ... 

e il vostro CSS in questo modo:

.menu .menu { 
    display: none; 
} 

.menu .menuitem:hover .menu { 
    display: block; 
    float: left; 
    // likely need to set top & left 
} 

Answer 3

Ci sono due approcci si possono adottare, per avere un elemento è passato il mouse influisce (E) un altro elemento (F):

1. F è un bambino-elemento del E o
2. F è una dopo-fratello (o del fratello discendente) elemento di E (in quel E appare del mark-up/DOM primaF):

Per illustrare la prima di queste opzioni (F come discendente/figlio di E):

.item:hover .wrapper { 
    color: #fff; 
    background-color: #000; 
}​ 

Per dimostrare la seconda opzione, F essere un elemento di pari livello di E:

In questo esempio, se .wrapper era un fratello immediato di .item (senza altri elementi tra i due), è possibile utilizzare anche .item:hover + .wrapper.

JS Fiddle demonstration.

Riferimenti:

• CSS 2.1 selectors, at the W3.org.

Answer 4

Puoi farlo creando il seguente CSS. si può mettere qui il CSS è necessario incidere classe bambino in caso di passaggio del mouse sulla radice

.root:hover .child { 
 
    
 
}