Wie entferne ich :hover?

Question

Ich habe ein kleines Problem mit einem Skript.
Ich möchte eine Standardaktion auf :hover für Clients mit deaktiviertem Javascript haben, aber für diejenigen mit aktiviertem Javascript möchte ich eine andere Aktion (eigentlich... dieselbe Aktion, aber ich möchte einen kleinen Übergangseffekt hinzufügen).

Also... Wie kann ich das machen? Ich benutze jQuery.

Answer 1

Zwei Klassen auf das relevante Element anwenden. Eine enthält das Hover-Verhalten, und eine enthält alle anderen Stile.

Sie können dann das jQuery

$(element).removeClass('hover');

method verwenden, um die Klasse mit dem Hover-Verhalten zu entfernen und dann alles andere anzuwenden, was Sie möchten, mit

$(element).bind('mouseover', function () { doSomething(); });
$(element).bind('mouseout', function () { doSomething(); });

Answer 2

Wie wäre es, den :hover-Fallback in ein Stylesheet zu setzen, das nur geladen wird, wenn JavaScript deaktiviert ist?

Answer 3

Hier ist eine Lösung ohne Hack-Klassen:

CSS:

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

jQuery (verwendet jQueryUI zur Animation der Farbe):

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

Demo

Answer 4

Ich denke, der beste Ansatz wäre, das :hover-Verhalten als Alternative für Benutzer ohne JavaScript beizubehalten und dann JQuery zu verwenden, um Mouseover- und Mouseout-Ereignisbehandlungen zu erstellen, um einen anderen Effekt für JavaScript-fähige Benutzer zu erzeugen.

JQuery JavaScript-Bibliothek - Ereignisse/Mouseover

Answer 5

Es ist eine sehr alte Frage, aber ich fühle das Bedürfnis zu sagen, dass Modernizr einen sehr guten Weg bietet, um solche Ausweichlösungen zu implementieren.

Fügen Sie einfach Modernizr im Kopf ein und Sie können Folgendes tun:

.no-js a:hover {
   Hintergrundfarbe und ähnliches einstellen
   für Fälle, in denen kein JavaScript vorhanden ist
}

Andererseits, wenn Sie dies auf eine andere Weise machen möchten und nur CSS setzen, wenn JavaScript vorhanden ist

.js a:hover {
   Hintergrundfarbe auf Standard setzen
   und die Textdekoration
}

Es ist mehr oder weniger die gleiche Lösung wie das Hinzufügen eines Hover-Tags zum Markup, aber etwas robuster.