Div con effetto

[sevenjeak]

Salve a voi tutti , utenti di AV.

Scrivo questa discuzione per chiedervi un piccolo favore , ho bisogno di un codice presente nel tag <div> che quando mi passi sopra il mause il div mi esegue una class presende nel foglio css e quando il mause si leva dal div il div torni come prima , cioè quando la class non era attivata

lo saprete fare questo ?

[dreadnaut]

se usi la pseudoclasse :hover nel css questo avviene in automatico, ma sappi che non è supportato da IE6<, quindi per esso dovresti (sei vuoi) ricorrere ad un javascript aggiuntivo.

Esempio:

div.coneffetto {   background: yellow;  }
div.coneffetto:hover {   background: red;  }

[dementialsite]

se usi la pseudoclasse :hover nel css questo avviene in automatico, ma sappi che non è supportato da IE6<, quindi per esso dovresti (sei vuoi) ricorrere ad un javascript aggiuntivo. ...

Nel dettaglio:

<style type="text/css">
div.effetto_spento { ... gli stili in stato "spento" ... }
div.effetto_acceso { ... gli stili in stato "acceso" ... }
</style>
...
<div class="effetto_spento" onmouseover="this.className='effetto_acceso';" onmouseout="this.className='effetto_spento';">
...
</div>

Stammi bene...

[sevenjeak]

Nel dettaglio:

<style type="text/css">
div.effetto_spento { ... gli stili in stato "spento" ... }
div.effetto_acceso { ... gli stili in stato "acceso" ... }
</style>
...
<div class="effetto_spento" onmouseover="this.className='effetto_acceso';" onmouseout="this.className='effetto_spento';">
...
</div>

Stammi bene...

questo va con IE6 o suggessivo e con FF, se non va , come faccio a farli andare in tutte e due i browser ?

cmq , ora lo mi va, ma lo provato solo con FF

[dementialsite]

In teoria il JavaScript che ti ho scritto sopra dovrebbe funzionare con tutti i browser più recenti, a meno che ovviamente JavaScript non sia disabilitato.

Volendo potresti combinare gli script mio e di dreadnaut e "fregare" tra i browser, quelli che supportano correttamente CSS (tra cui, però, purtroppo non c'è IE6 con JS disabilitato...):

<style type="text/css">
div.effetto_spento { ... gli stili in stato "spento" ... }
div.effetto_spento:hover { ... gli stili in stato "acceso" ... }
div.effetto_acceso { ... gli stili in stato "acceso" ... }
</style>
...
<div class="effetto_spento" onmouseover="this.className='effetto_acceso';" onmouseout="this.className='effetto_spento';">
...
</div>

Stammi bene...