CSS mouseoverover JavaScript mouseover

Question

Ci sono momenti in cui ho una scelta tra l'utilizzo di un elemento CSS: hover o JavaScript onmouseover per controllare l'aspetto degli elementi html su una pagina. Si consideri il seguente scenario in cui un div avvolge un ingresso

<div> 
<input id="input"> 
</div> 

voglio l'input per cambiare il colore di sfondo quando il cursore del mouse passa sopra il div. L'approccio CSS è

<style> 
    input {background-color:White;} 
    div:hover input {background-color:Blue;} 
</style> 

<div><input></div> 

L'approccio JavaScript è

<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';"> 
    <input id="input"> 
</div> 

Quali sono i vantaggi e gli svantaggi di ogni approccio? L'approccio CSS funziona bene con la maggior parte dei browser web? JavaScript è più lento del css?

Answer 1

Il problema con: hover è che IE6 lo supporta solo sui collegamenti. Io uso jQuery per questo genere di cose in questi giorni:

$("div input").hover(function() { 
    $(this).addClass("blue"); 
}, function() { 
    $(this).removeClass("blue"); 
}); 

Rende le cose molto più semplici. Funzionerà in IE6, FF, Chrome e Safari.

Answer 2

Quello CSS è molto più gestibile e leggibile.

Answer 3

L'approccio CSS non richiede Javascript.

Answer 4

Usa CSS, semplifica la gestione dello stile stesso.

Answer 5

MODIFICA: questa risposta non è più valida. Il CSS è ben supportato e Javascript (leggi: JScript) ora è praticamente richiesto per qualsiasi esperienza web, e poche persone disabilitano javascript.

La risposta originale, come me nel 2009.

Fuori della parte superiore della mia testa:

Con i CSS, si possono avere problemi con il supporto del browser.

Con JScript, le persone possono disabilitare jscript (questo è quello che faccio).

Credo che il metodo preferito sia fare il contenuto in HTML, Layout con CSS e qualsiasi cosa dinamica in JScript. Quindi, in questo caso, vorresti probabilmente prendere l'approccio CSS.

Answer 6

mi consiglia di utilizzare Qualunque sia: hover: http://www.xs4all.nl/~peterned/csshover.html

Answer 7

Se non è necessario il supporto al 100% per IE6 con JavaScript disabilitato si potrebbe usare qualcosa come ie7-js con IE commenti condizionali. Quindi devi solo usare le regole CSS per applicare effetti al passaggio del mouse. Non so esattamente come funziona, ma usa javascript per fare un sacco di regole css che funzionano normalmente in IE7 e 8.

Answer 8

In reguards a using jQuery to do hover, io uso sempre il plugin HoverIntent perché non lo fa Attiva l'evento fino a quando non ti fermi su un elemento per un breve periodo di tempo ... questo smette di sparare a molti eventi del mouse se accidentalmente fai scorrere il mouse su di loro o semplicemente mentre scegli un'opzione.

Answer 9

Un ulteriore vantaggio di farlo in javascript è che è possibile aggiungere/rimuovere l'effetto hover in diversi momenti nel tempo, ad es.il passaggio del mouse sulle righe della tabella cambia colore, fai clic su Disabilita l'effetto hover e avvia la modifica in modalità luogo.

Answer 10

Perché non entrambi? Usa jQuery per effetti animati e CSS come riserva. Questo ti offre i vantaggi di jQuery con graceful degradation.

CSS:

a {color: blue;} 
a:hover {color: red;} 

jQuery (usa jQueryUI per animare colore):

$('a').hover( 
    function() { 
    $(this) 
     .css('color','blue') 
     .animate({'color': 'red'}, 400); 
    }, 
    function() { 
    $(this) 
     .animate({'color': 'blue'}, 400); 
    } 
); 

demo

Answer 11

C'è un'altra differenza da tenere a mente tra i due. Con i CSS, lo stato :hover è sempre disattivato quando il mouse si sposta da un elemento. Tuttavia, con JavaScript, l'evento onmouseout non viene attivato quando il mouse si sposta dall'elemento sul browser chrome anziché sul resto della pagina.

Questo accade più spesso di quanto si possa pensare, soprattutto quando si sta creando una barra di navigazione nella parte superiore della pagina con stati di passaggio del mouse personalizzati.

Answer 12

In Internet Explorer, deve essere dichiarato un <! DOCTYPE> per: il selettore del passaggio del mouse su elementi diversi dall'elemento < a>.

Answer 13

Una grande differenza è che lo stato ": hover" viene automaticamente disattivato quando il mouse si sposta fuori dall'elemento. Di conseguenza, tutti gli stili applicati al passaggio del mouse vengono automaticamente invertiti. D'altra parte, con l'approccio javascript, è necessario definire entrambi gli eventi "onmouseover" e "onmouseout". Se si definisce solo "onmouseover", gli stili applicati "onmouseover" verranno mantenuti anche dopo il mouse, a meno che non si sia definito esplicitamente "onmouseout".