Cambio immagine passaggio del mouse

[nozem]

Buongiorno,
Avrei bisogno di aiuto per quanto riguarda la proprietà del cambio immagine al passaggio del mouse, vi presento la problematica a livello grafico che mi viene più facile:

La faccia di partenza è ad esempio questa:



io vorrei arrivare ad un risultato del genere:


Ovvero che quando passo con il mouse su "A" cambia sia la suddetta che l'immagine "R" sulla destra, magari con un effetto sfumato, realizzando il tutto con i css, è possibile?

Grazie in anticipo per l'aiuto.

[Mich_]

Non e` difficile, solo un po' complesso ed e` necessario che nell'HTML R stia dentro A

HTML:
<div id="container">
  <div id="bloccoA">
    

A</p>
    <div id="bloccoR">
      

R</p>
    </div>
  <div>
  <div id="bloccoB">
    

B</p>
  </div>
  <div id="bloccoC">
    

C</p>
  </div>
</div>


CSS:
#container {
  width: ...;
  ...
}
#bloccoA {
  position: relative;
  background: url(sfondoA)
}
#bloccoR {
  position: absolute;
  top: 0;
  left: 200px;    /* da sistemare */
  height: ...;
  width: ...;
  background-image: url(sfondoRblu);
}
#bloccoA:hover {
  background-image: url(sfondoAHDJ);
}
#bloccoA:hover bloccoR {
    background-image: url(sfondoRnero);
}
...

Questo esempio e` fatto con immagini di sfondo diverse, ma si possono usare altre proprieta`. L'importante e` rispettare la logica delle dipendenze dei blocchi

Nota: NON funziona in IE vecchie versioni o quirks mode: in tal caso occorre inserire dei tag <a> e far lavorare :hover solo sui link

Per i transienti, qualcosa si puo` fre anche con CSS, ma non sono ben supportati, per cui potrebbe essere conveniente realizzarli in JS.

Intanto vedi se ti va bene: i transienti si inseriscono dopo, quando la struttura funziona

[nozem]

Purtroppo non mi funziona questo pezzo:

#bloccoA:hover bloccoR { background-image: url(sfondoRnero); }

nel senso che se lo metto così com'è non succede nulla, cambia solo il blocco A, ho provato a cambiarlo in:

#bloccoA:hover, #bloccoR { background-image: url(sfondoRnero); }

ma ho solo combinato un casino

[Mich_]

Hai ragione a meta`.

Giusto aggiungere il # prima del blocco R, ma sbagliato inserire la virgola.

L'operatore virgola assegna la stessa formattazione ai due (o piu`) oggetti separati dalle virgole
L'operatore spazio indica discendenza (non necessariamente diretta): cioe` che il secondo sta dentro il primo

[nozem]

Purtroppo però non riesco a farlo funzionare, cambia soltanto quella relativa al blocco A ma il resto resta invariato.
Può essere il fatto che nel mio codice il div del bloccoA è dentro una tabella mentre il div del bloccoR non lo è?

[Mich_]

Come e` possibile?
Il bloccoR deve stare DENTRO il bloccoA (a livello di codice HTML, poi viene spostato dal posizionamento CSS)

E comunque se hai un blocco dentro una tabella, probabilmente stai usando le tabelle per formattare, cosa che e` controproducente per vari motivi:
1. forzi gli oggetti ad avere valore semantico diverso da quanto previsto
2. rendi la pagina non-accessibile (= non usufruibile ad alcune categorie di utenti)
3. devi poi forzare il CSS a fere cose per cui non e` previsto, con gravi ripercussioni per avere pagine che si vedono uguale in tutti i browser