Newsgroup: it.comp.lang.javascript
Titolo: cambia stile onmouseover

Salve a tutti,
Premetto che ho cercato e non sono riuscito a trovare risposte valide o
perlomento 'cross browser' al problema che sto incontrando.
Ho un menů a icone in una tabella linkate a varie pagine, e con gli stili
CSS quando passo sopra ad ogni icona cambia il fondo e il bordo dell'icona.
Il problema č che in questo menů ci sono delle icone che non sono linkate,
bensě sono moduli POST ed in quel caso non ho l'effetto rollover perchč
quello funziona solo con i link.
Come posso ovviare al problema? Come far si che appena il mouse passi sopra
quell'icona/form/td mi cambi lo stile?
Spero di essere stato chiaro nell'esporre il problema e ringrazio fin d'ora
il buon samaritano.
-- 
Effe8

 CSS quando passo sopra ad ogni icona cambia il fondo e il bordo dell'icona.
Qua non ho capito: come fai con i css a fare ciò con delle icone (cioè con
delle immagini)? Stai lavorando solo con mozilla & Co. ?
<tag>:hover e simili funzionano con IE solo su anchor, temo...
Posta quello che hai fatto
-- 
"Emancipate yourselves from mental slavery;
None but ourselves can free our minds"
									    B.M.

> <tag>:hover e simili funzionano con IE solo su anchor, temo...
Ciao Cristiano,
Basandomi su un sito che sto realizzando in questi giorni ti dico che su IE
"<tag> :hover" funziona anche su elementi diversi da anchor.

 "<tag> :hover" funziona anche su elementi diversi da anchor.
Un esempio? (cosě lo testo per capire da che versione e quali tag supporta)


Un esempio? (cosě lo testo per capire da che versione e quali tag supporta)
Hai ragione tu Cristiano,
ho controllato e anche se ho usato ":hover" su un elemento diverso da anchor
("<li>") questi viene attivato soltanto relativamente all'area occupata
dall'ancora.
Guarda il menu a questa pagina
http://www.fm76.it/personal/friends/donatellomazzone/terrorcore.it/eventi.htm
e qui trovi il foglio di stile del menu
http://www.fm76.it/personal/friends/donatellomazzone/terrorcore.it/menu.css
Ad ogni modo questa limitazione di IE č facilmente superabile con un piccolo
compromesso (aggiungere un'ancora) e dei piccoli accorgimenti:
prendendo il caso esposto da effe8 potrebbe scrivere al posto di
[...]
<td class="icona"><img src="qwert.gif"></td>
[...]
una cosa tipo
<style>
    .icona :hover{
        background-color: #f00;
        border: 2 solid #000;
    }
</style>
[...]
<td class="icona"><a href="javascript: void(0);"><img
src="qwert.gif"></a></td>
[...]
"class='icona'" puň stare tanto nell'ancora quanto nel TD.
Ho scritto al volo senza provare nulla ma dovrebbe funzionare.
Qualunque considerazione al riguardo č gradita.

 src="qwert.gif"></a></td>
Secondo me non funziona cosě (ma non ho il tempo adesso di testare)
Qua le specifiche css2 (Dice che non č specificato con quali elementi deve
funzionare):
http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes
Qua microsoft lo indica solo per il tag a:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/hover.asp
Non so se hanno variato qualcosa con IE6.05, ma non mi sembra di aver letto
nulla su ciň nelle specifiche di xp sp2.
-- 
"Ti sei salvato
 o sei entrato in banca pure tu?"
									    A.V.

Se ti può essere utile eccoti uno snippet da copia incolla, a me funziona su
winXP / IE6.0
<style>
.ciao :hover{
 background-color: green;
}
</style>
<table>
    <tr>
        <td class="ciao">
            <a href="javascript: void(0);">ciao Cristiano</a>
            da Francesco
</table>
Se lo provi mi farebbe piacere leggere le tue considerazioni al riguardo che
come sempre non potranno che essere interessanti.
fm76

 winXP / IE6.0
[CUT]
http://www.criosoftware.it/TestHover.htm
è l'anchor che eredita la class dalla td...hover viene ignorato per la td e
viene applicato per l'anchor (vedi l'esempio sopra dove ho messo del testo
nella td ma al di fuori dell'anchor).
Lo ho testato con IE4.01, 5.0 e 5.5 e funziona, ma lo ho testato con IE
"stand-alone" e non mi fido molto (purtroppo non ho sotto mano pc con IE
"puro", anche se li dovrò far mettere in produzione entro breve).
-- 
"Affacciati affacciati benedici, guardaci
 guardaci...guardaci!
 Tanto sono quasi duemila anni che stai a guardare!"
									    E.B.

 </style>
[cut]
Al di la' della mancata chiusura TD e TR; la regola dello stylesheet che
hai scritto tu non e' equivalente ad un:
.ciao:hover{}
bensi' ad un:
.ciao a:hover{}
E quindi non si applica "indistintamente al TD come all'anchor", bensi'
unicamente all'anchor.. e non solo su IE. Anche FF segue il medesimo
criterio. Difatti, per associare l'hover al TD avresti dovuto scrivere:
td.ciao:hover{}
A questo punto, se gia' stiamo aggiugendo un anchor in piu', tanto vale
scrivere la regola corretta, ovvero:
a.ciao:hover{}
nel caso si abbia un solo link (aggiunto per sopperire la mancanza di IE),
oppure va benissimo anche un:
td.ciao a:hover{}
Nel caso si voglia associare la regola agli anchor discendenti di un td con
classe "ciao".
-- 
ZER0://coder.gfxer.web-designer/
~ "Problemi" e' il nome che gli informatici danno a quelli che
comunemente verrebbero definiti "disastri"; altrimenti si chiamano
"features".


In effetti mi sono sbagliato a scrivere, quando passo sopra l'icona mi
cambia lo sfondo e il bordo del LINK.
Per quel che rigurda l'unica icona che era associata ad un FORM e non ad un
LINK ho risolto in questo modo.
<div class=ariposo onmouseover="this.className='evidenziato'"
onmouseout="this.className='ariposo'">
... tutto il mio bel FORM
</div>
Che ne pensate? E la soluzione è anche cross-browser.
Grazie a voi tutti per l'interessamento e l'aiuto che mi avete dato.
-- 
effe8