:hover su un secondo elemento

**rosafanti** · 11-05-2007, 15:19

Questo il mio quesito:
Posso cambiare attraverso la pseudo classe :hover su un blocco le proprietà di un altro blocco?

Esempio: 2 div
<div id="1"></div>
<div id="2"></div>
all' hover sul primo voglio che il secondo cambi colore.
Mi è riuscito di fare una cosa del genere ma solo con elementi contenuti all'interno dell'elemento a cui faccio hover.

es:
css:

a:hover p{
color:#FF0000;
}

html:

<a href="#">PIPPO

PLUTO</p></a>

cliccando su pippo cambia colore solo pluto....
Io vorrei avere però:

PIPPO

PLUTO</p>

è possibile???

**Mich_** · 14-05-2007, 09:46

In teoria forse e` possibile, utilizzando opportunamente i selettori (fratello, figlio diretto, :first-child, ...).
In pratica tali cose non funzionano in IE, per cui la cosa assomiglia ad un bell'esercizio didattico ...

In linea di massima ho visto fare quelle cose tramite JS.

**crinzy** · 16-05-2007, 12:22

certo che si può

ecco il codice:

-------------------------------------------------

<html>
<head>
<title></title>

<style type="text/css">
div {width:200px; height;100px; margin:20px;}
.red {background-color:Red;}
.green {background-color:Green;}
</style>
</head>

<body>

<div id="ciao" class="red" onmouseover="hola.className='green'" onmouseout="hola.className='red'">Ciao</div>

<div id="hola" class="red" onmouseover="ciao.className='green'" onmouseout="ciao.className='red'">Hola</div>

</body>
</html>

**rosafanti** · 16-05-2007, 12:26

MITICA!

**fcaldera** · 16-05-2007, 12:26

Originariamente inviato da crinzy
certo che si può

...

<div id="ciao" class="red" onmouseover="hola.className='green'" onmouseout="hola.className='red'">Ciao</div>

<div id="hola" class="red" onmouseover="ciao.className='green'" onmouseout="ciao.className='red'">Hola</div>

...

non credo volesse una soluzione in javascript ^^'
(per quanto funzionante sia la tua)

Edit: come non detto

**rosafanti** · 16-05-2007, 12:28

total css mi sa nn è possibile
mi accontento di questa

**fcaldera** · 16-05-2007, 12:30

Originariamente inviato da rosafanti
total css mi sa nn è possibile
mi accontento di questa

allora sposto in javascript

**crinzy** · 16-05-2007, 12:31

**Xinod** · 16-05-2007, 12:40

hola.className='green'
non puo' essere corretto per i browser aderenti agli standard

document.getElementById('hola').className='green'

**Craig Willmore** · 20-05-2007, 11:13

Originariamente inviato da crinzy
certo che si può

ecco il codice:

-------------------------------------------------

<html>
<head>
<title></title>

<style type="text/css">
div {width:200px; height;100px; margin:20px;}
.red {background-color:Red;}
.green {background-color:Green;}
</style>
</head>

<body>

<div id="ciao" class="red" onmouseover="hola.className='green'" onmouseout="hola.className='red'">Ciao</div>

<div id="hola" class="red" onmouseover="ciao.className='green'" onmouseout="ciao.className='red'">Hola</div>

</body>
</html>

E' possibile usare questa tecnica anche per le immagini che cambiano in hover?

Discussione: :hover su un secondo elemento

Strumenti discussione

Ricerca discussione

Visualizza

:hover su un secondo elemento

Permessi di invio