Eventi: si possono modificare proprietà css di un el. B tramite un hover su un el. A?

[Donovant]

Salve, vorrei sapere se c'è un modo tramite CSS che funzioni almeno per Chrome, Firefox, Opera e Safari (e magari IE 10) per cui se applicato un ":hover" su un elemento, lo stesso possa attivare un evento su un altro elemento.

Nello specifico A:hover -> fa scattare la comparsa dell'elemento B.
Ovviamente con js si può fare facilmente, ma sono in cerca se c'è, di una soluzione CSS.

Grazie.

[fcaldera]

Originariamente inviato da Donovant
Salve, vorrei sapere se c'è un modo tramite CSS che funzioni almeno per Chrome, Firefox, Opera e Safari (e magari IE 10) per cui se applicato un ":hover" su un elemento, lo stesso possa attivare un evento su un altro elemento.

Nello specifico A:hover -> fa scattare la comparsa dell'elemento B.
Ovviamente con js si può fare facilmente, ma sono in cerca se c'è, di una soluzione CSS.

Grazie.

tutto dipende da come è strutturato il markup. Fai un esempio semplice/minimale su jsfiddle o jsbin e condividi il link

[Donovant]

Non capisco, non basta un esempio come quello citato?
Cosa non si capisce?

Vado con il mouse sull'elemento A e vorrei comparisse l'elemento B.
Se c'è bisogno di un murkup particolare forse non è la soluzione che voglio io....
Boh forse non ho capito io quello che vuoi intendere.

[Mich_]

Originariamente inviato da Donovant
Salve, vorrei sapere se c'è un modo tramite CSS che funzioni almeno per Chrome, Firefox, Opera e Safari (e magari IE 10) per cui se applicato un ":hover" su un elemento, lo stesso possa attivare un evento su un altro elemento.

Nello specifico A:hover -> fa scattare la comparsa dell'elemento B.
Ovviamente con js si può fare facilmente, ma sono in cerca se c'è, di una soluzione CSS.

Grazie.

E` facile da realizzare solo se l'elemento B e` inserito nell'elemento A (quello che conta e` la marcatura (codice HTML), non la posizione sullo schermo (che si modifica con il position:absolute) - Tecnica usata in alcuni menu a comparsa

[Donovant]

Perfetto, avevo intuito che con il semplice CSS avrei dovuto fare una cosa del genere, ma in ogni caso come fare anche se A-[B] A:hover ???, come faccio a determinare le proprietà di B andando su A?

[Mich_]

come faccio a determinare le proprietà di B andando su A?

HTML:
<div id="bloccoA">
  ....
  <div id="bloccoB">
  ...
  </div>
</div>


CSS:
#bloccoA {
  ... formattazione di A a riposo ...
}
#bloccoA #bloccoB {
  ... formattazione di B con A a riposo ...
}

#bloccoA:hover {
  ... formattazione di A con A attivo ...
}
#bloccoA:hover #bloccoB {
  ... formattazione di B con A attivo ...
}

Nota che cosi` com'e` non funziona in IE; funziona solo se #bloccoA e` un tag <a> (che pero` allora non e` un elemento di tipo blocco ...)

[Donovant]

Grazie mille, non pensavo si potesse fare.