2010-11-17 4 views
9

Se io uso una classe per un div normale, riesco a scrivere il CSS come:css: ogni supporto di classe: hover state?

.messagebc:hover { 
... 
} 

E 'legale?

+0

E 'importante notare che i pochi siti di grandi dimensioni ancora sostenere IE 6. Non vorrei andare fuori del vostro modo per essere sicuri di ottenere la funzionalità di mirroring con esso. – Webnet

risposta

13

E 'ineffiecient da usare: hover su elementi non-link.

Evitare lo pseudo-selettore hover per gli elementi non di collegamento per i client IE.

Se si utilizza: hover sulla non-ancora elementi, verificare la pagina in IE7 e IE8 per essere sicuri che la pagina è utilizzabile. Se trovi che: il passaggio del mouse sta causando problemi di prestazioni , considera condizionatamente utilizzando un gestore di eventi onmouseover JavaScript per IE client.

: muovere il pseudo-selettore a elementi non-link è un selettore molto ineffiecient (es): Ad esempio:

h3:hover {...} 
.foo:hover {...} 
#foo:hover {...} 
div.faa :hover {...} 

L': muovere il pseudo-selettore su elementi non ancoraggio è notoriamente rendere IE7 e IE8 lenti in alcuni casi *. Quando non viene utilizzato un doctype rigoroso, IE7 e IE8 ignoreranno: passa il mouse su qualsiasi elemento diverso dalle ancore. Quando si utilizza un doctype rigoroso, il passaggio del mouse su non-ancore può causare un peggioramento delle prestazioni.

More info on un-effiecient selectors

3

Sì, tuttavia in IE6 è possibile impostare :hover solo sugli elementi ANCHOR.

4

perché non hai semplicemente provato? sì, è possibile (in tutti i browser moderni, l'IE6 sa: passa il mouse solo su a, se ricordo bene).

+0

Ti ricordi bene. Quindi la domanda è più: tutti gli elementi supportano: hover? – Baju

3

Solo IE6 non supporta su elementi diversi <a>, ma che può essere risolto con un semplice javascript: ie7.js

4

Sì, è possibile utilizzare :hover per tutti gli elementi nei browser moderni (IE7 +). mentre il supporto IE6 :hover solo per <a> elementi, si dovrebbe scrivere voi HTML e CSS in modo, che non sarà necessario utilizzare JS-patch (ad esempio, nella lista-menu basta usare <li><a href="#">Link</a></li>, non <a><li><a> e assegnare :hover al link elemento. Questo dovrebbe fare il trucco.)

2

Ogni browser attuale lo supporterà. Se ti serve per funzionare in un browser più vecchio come IE6, dai un'occhiata al link di @ Willem.

3

La quota di IE6 è 5,55% ed è diminuzione di tutti i giorni quindi si può utilizzare lo Wikipedia ie6