Passaggio del mouse CSS e passaggio del mouse JavaScript [chiuso]

Ci sono momenti in cui posso scegliere tra l'utilizzo di un elemento CSS: hover o JavaScript onmouseover per controllare l'aspetto degli elementi html su una pagina. Considera il seguente scenario in cui un div racchiude un input

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

Voglio che l'input cambi 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 ciascun approccio? L'approccio CSS funziona bene con la maggior parte dei browser web? JavaScript è più lento di css?

Il problema con: hover è che IE6 lo supporta solo sui collegamenti. 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ù facili. Funzionerà in IE6, FF, Chrome e Safari.

Quello CSS è molto più manutenibile e leggibile.

Perché non entrambi? Usa jQuery per effetti animati e CSS come riserva. Questo ti dà i vantaggi di jQuery con un grazioso degrado .

CSS:

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

jQuery (usa jQueryUI per animare il colore):

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

demo

Un ulteriore vantaggio di farlo in javascript è che puoi aggiungere / rimuovere l'effetto al passaggio del mouse in diversi momenti nel tempo, ad esempio il passaggio del mouse sulle righe della tabella cambia colore, il clic disattiva l'effetto al passaggio del mouse e avvia la modifica in modalità posizione.

Una grande differenza è che lo stato ": hover" viene automaticamente disattivato quando il mouse esce dall'elemento. Di conseguenza, tutti gli stili applicati al passaggio del mouse vengono automaticamente invertiti. D'altra parte, con l'approccio javascript, dovresti definire sia gli eventi "onmouseover" che "onmouseout". Se definisci solo "onmouseover", gli stili che vengono applicati "onmouseover" persisteranno anche dopo che esci dal mouse a meno che tu non abbia definito esplicitamente "onmouseout".

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

La risposta originale, come la mia opinione nel 2009.

Fuori dalla mia testa:

Con CSS, potresti avere problemi con il supporto del browser.

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

Credo che il metodo preferito sia quello di creare contenuti in HTML, layout con CSS e qualsiasi cosa dinamica in JScript. Quindi, in questo caso, probabilmente vorrai adottare l'approccio CSS.

C'è un'altra differenza da tenere a mente tra i due. Con i CSS, lo :hoverstato è sempre disattivato quando il mouse si sposta da un elemento. Tuttavia, con JavaScript, l' onmouseoutevento non viene generato quando il mouse si sposta dall'elemento sul chrome del browser piuttosto che sul resto della pagina.

Ciò accade più spesso di quanto potresti pensare, specialmente quando crei una barra di navigazione nella parte superiore della pagina con stati al passaggio del mouse personalizzati.

In Internet Explorer, deve essere dichiarato un <! DOCTYPE> affinché il selettore: hover funzioni su elementi diversi dall'elemento <a>.

Usa CSS, rende molto più semplice la gestione dello stile stesso.

Per quanto riguarda l' utilizzo di jQuery per eseguire il passaggio del mouse , utilizzo sempre il plug-in HoverIntent poiché non attiva l'evento finché non ti fermi su un elemento per un breve periodo di tempo ... questo smette di sparare un sacco di mouse sugli eventi se corri accidentalmente il mouse su di essi o semplicemente mentre si sceglie un'opzione.

Se non hai bisogno del supporto al 100% per IE6 con javascript disabilitato, potresti usare qualcosa come ie7-js con commenti condizionali di IE. Quindi usi le regole CSS per applicare gli effetti al passaggio del mouse. Non so esattamente come funziona, ma utilizza javascript per far funzionare molte regole CSS che normalmente non funzionano in IE7 e 8.