hover su IE6

[pastoweb]

Ciao, su questa pagina http://www.elearnit.net/soluzioni/soluzioni.html i box hanno un effetto hover che cambia l'immagine e sottolinea il testo. Funziona sia su Firefox che IE7, ma su IE6 mi dà problemi.

Qualche idea?

[pastoweb]

niente?

[Erith]

La pseudoclasse (o stato) hover su IE 6 funziona solo sugli elementi cliccabili.
Vuol dire che funziona solo su <a> o <input type='button'/>.
Per far funzionare lo stato hover anche su IE 6 ti consiglio di usare javascript.

[pastoweb]

Quindi non funziona sugli elementi inseriti in un elemento cliccabile? La pseudoclasse è associata ad un <a> in cui ho inserito il div. La struttura del codice insomma è:

<a>
<div>
contenuto del box
</div>
</a>


non può funzionare?

[Erith]

solitamente non puoi inserire un div dentro un a;

Non è possibile inserire un elemento block level in uno inline level

Il mio consiglio resta l'utilizzo di js. a questo proposito ti consiglio caldamente l'utilizzo di Jquery un framework javascript che utilizza i selettori css per recuperare gli elementi e supporta da explorer 5...

in jquery avresti dovuto fare così

$(".divdahoverare").mouseover(function()
{
     $(this).toggleClass("hover");
}
);
$(".divdahoverare").mouseout(function()
{
     $(this).toggleClass("hover");
}
); 

o la più semplice

$(".divdahoverare").hover(function()
{
     $(this).toggleClass("hover");
}, function()
{
     $(this).toggleClass("hover");
},
); 

e avresti dovuto cambiare i css da così

.divdahoverare:hover {/*regole varie*/}

a così

.divdahoverare.hover {/*regole varie*/}

Spero di essere stato utile.

Antonio

[fcaldera]

usa un file .htc per correggere il comportamento di IE 6

http://www.xs4all.nl/~peterned/csshover.html

e lo includi con un commento condizionale

        <!--[if lte IE 6]>
            <style type="text/css">
                body { behavior:url("css/csshover.htc"); }
            </style>
        <![endif]-->

in questo modo eviti di usare javascript in modo incondizionato per tutti i browser (quando in realtà il problema è IE<=6) e puoi usare la pseudoclasse :hover, :active; e :focus su tutti gli elementi

[Erith]

fcal, ti do ragione, meglio usare un behavior che js (anche se un behavior non è altro che un file js), ma in questo modo sistemi la compatibilità solo con ie6, mentre jquery supporta anche i browser più datati di quest'ultimo, e altri browser minori che non supportano gli hover sugli elementi non cliccabili...

[fcaldera]

Originariamente inviato da Erith
fcal, ti do ragione, meglio usare un behavior che js (anche se un behavior non è altro che un file js), ma in questo modo sistemi la compatibilità solo con ie6, mentre jquery supporta anche i browser più datati di quest'ultimo, e altri browser minori che non supportano gli hover sugli elementi non cliccabili...

Non mi sembra: nella home page di jquery leggo che IE è supportato solo nelle versioni 6 e 7.

Comunque se la tua necessità è quella di gestire l'hover su elementi diversi dai link, quel file corregge la situazione tra l'altro anche su Explorer 5.5 e (probabilmente) anche sul 5.

[Graboid]

Ciao,
uso anche io quel file ma mi da qualche problemino su ie6, come se l'hover avvenisse con un po' di ritardo, per esempio quando si passa il mouse su tanti "li" vicini si nota parecchio.

Avete mai avuto questo problema?

[fcaldera]

Originariamente inviato da Graboid
Ciao,
uso anche io quel file ma mi da qualche problemino su ie6, come se l'hover avvenisse con un po' di ritardo, per esempio quando si passa il mouse su tanti "li" vicini si nota parecchio.

Avete mai avuto questo problema?

stai usando l'ultima versione 2.02.060206 del file .htc?

in quella pagina leggo

If response is really slow during the loading of a page with the htc included, try writing CSS rules with :hover more specifically by adding nodenames and possibly nodes/ids of ascendents