CSS Hover vs. JavaScript Mouseover [geschlossen]

Es gibt Zeiten, in denen ich die Wahl habe, ein CSS-Element zu verwenden: Hover oder JavaScript OnMouseover, um das Erscheinungsbild von HTML-Elementen auf einer Seite zu steuern. Stellen Sie sich das folgende Szenario vor, in dem ein Div eine Eingabe umschließt

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

Ich möchte, dass die Eingabe die Hintergrundfarbe ändert, wenn der Mauszeiger über dem div bewegt wird. Der CSS-Ansatz ist

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

<div><input></div>

Der JavaScript-Ansatz ist

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

Was sind die Vor- und Nachteile jedes Ansatzes? Funktioniert der CSS-Ansatz mit den meisten Webbrowsern gut? Ist JavaScript langsamer als CSS?

Das Problem mit: hover ist, dass IE6 es nur auf Links unterstützt. Ich benutze jQuery heutzutage für solche Dinge:

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

Erleichtert die Arbeit erheblich. Das funktioniert in IE6, FF, Chrome und Safari.

Das CSS ist viel wartbarer und lesbarer.

Warum nicht beide? Verwenden Sie jQuery für animierte Effekte und CSS als Fallback. Dies bietet Ihnen die Vorteile von jQuery mit einer angemessenen Verschlechterung .

CSS:

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

jQuery (verwendet jQueryUI zum Animieren der Farbe):

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

Demo

Ein zusätzlicher Vorteil von Javascript besteht darin, dass Sie den Hover-Effekt zu verschiedenen Zeitpunkten hinzufügen / entfernen können - z. B. wenn Sie mit der Maus über Tabellenzeilen fahren, ändert sich die Farbe, klicken Sie auf Deaktivieren Sie den Hover-Effekt und starten Sie die Bearbeitung im Place-Modus.

Ein sehr großer Unterschied besteht darin, dass der Status ": hover" automatisch deaktiviert wird, wenn sich die Maus aus dem Element herausbewegt. Infolgedessen werden alle Stile, die beim Hover angewendet werden, automatisch umgekehrt. Andererseits müssten Sie beim Javascript-Ansatz sowohl "onmouseover" - als auch "onmouseout" -Ereignisse definieren. Wenn Sie nur "onmouseover" definieren, bleiben die Stile, die "onmouseover" angewendet werden, auch nach dem Mouseout erhalten, es sei denn, Sie haben explizit "onmouseout" definiert.

EDIT: Diese Antwort gilt nicht mehr. CSS wird gut unterstützt und Javascript (sprich: JScript) wird jetzt für jede Web-Erfahrung benötigt, und nur wenige Leute deaktivieren Javascript.

Die ursprüngliche Antwort, wie meine Meinung im Jahr 2009.

Aus dem Kopf:

Bei CSS können Probleme mit der Browserunterstützung auftreten.

Mit JScript können Leute jscript deaktivieren (das ist was ich tue).

Ich glaube, die bevorzugte Methode besteht darin, Inhalte in HTML, Layout mit CSS und alles Dynamische in JScript zu erstellen. In diesem Fall möchten Sie wahrscheinlich den CSS-Ansatz wählen.

Es gibt noch einen weiteren Unterschied zwischen den beiden. Bei CSS wird der :hoverStatus immer deaktiviert, wenn sich die Maus von einem Element entfernt. Bei JavaScript wird das onmouseoutEreignis jedoch nicht ausgelöst, wenn die Maus vom Element auf Browser-Chrome und nicht auf den Rest der Seite bewegt wird.

Dies geschieht häufiger als Sie vielleicht denken, insbesondere wenn Sie oben auf Ihrer Seite eine Navigationsleiste mit benutzerdefinierten Schwebezuständen erstellen.

In Internet Explorer muss ein <! DOCTYPE> deklariert sein, damit der: hover-Selektor für andere Elemente als das <a> -Element funktioniert.

Verwenden Sie CSS, um die Verwaltung des Stils selbst zu vereinfachen.

Um jQuery für den Hover zu verwenden , verwende ich immer das Plugin HoverIntent, da es das Ereignis erst auslöst, wenn Sie für kurze Zeit über ein Element pausieren. Dadurch werden nicht mehr viele Mouse-Over-Ereignisse ausgelöst, wenn Sie versehentlich ausgeführt werden die Maus darüber oder einfach bei der Auswahl einer Option.

Wenn Sie keine 100% ige Unterstützung für IE6 mit deaktiviertem Javascript benötigen, können Sie so etwas wie ie7-js mit IE-bedingten Kommentaren verwenden. Dann verwenden Sie einfach CSS-Regeln, um Hover-Effekte anzuwenden. Ich weiß nicht genau, wie es funktioniert, aber es verwendet Javascript, damit viele CSS-Regeln funktionieren, die normalerweise nicht in IE7 und 8 funktionieren.