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

ICH HABE DEINE LÖSUNG GEFUNDEN

Im Grunde fangen Sie damit an, was Sie mit dem CSS-Hover gemacht haben, neu zu definieren. (Natürlich würden Sie dies tun, indem Sie die Informationen dynamisch aus dem Style abrufen) dann können Sie mit Mouseover/Mouseout-Ereignissen in jQuery tun, was Sie möchten

Dies ermöglicht es Ihnen, das :hover-Ereignis in Ihrem CSS beizubehalten, da jQuery Ihre ursprünglichen Stilelemente an das Element bindet. Im Wesentlichen wird das :hover-Ereignis deaktiviert.

wenn Ihr CSS so aussieht:

a.class {
  background-color: #000000;
  background-position: 0 0;
  }
a.class:hover {
  background-color: #ffffff;
  background-position: 100% -50px;
  }

Ihr jQuery könnte etwas wie das Folgende sein:

jQuery("a.class").each(function () {

  var alteHintergrundfarbe = jQuery(this).css("backgroundColor");
  var alteHintergrundposition = jQuery(this).css("backgroundPosition");

  jQuery(".class").css({
        'backgroundColor':alteHintergrundfarbe,
        'backgroundPosition':alteHintergrundposition
  });

})
.bind("mouseover", function() {

  etwasTun();

})
.bind("mouseout", function() {

  etwasTun();

})

Answer 2

Sie können das Element nach dem Klick neu zeichnen
function redraw(element) {
if (!element) { return; }

let n = document.createTextNode(' ');
let disp = element.style.display;  // Machen Sie sich keine Sorgen um den vorherigen Anzeigestil

element.appendChild(n);
element.style.display = 'none';

setTimeout(function(){
    element.style.display = disp;
    n.parentNode.removeChild(n);
}, 100); // Sie können mit diesem Timeout spielen, um ihn so kurz wie möglich zu machen

}

Answer 3

Sie können das Verhalten im gesamten Dokument global aktivieren, indem Sie eine einzige CSS-Regel verwenden, und dann diese Regel in einer Anweisung in JavaScript deaktivieren, während Sie den neuen Ereignisbehandler installieren.

Fügen Sie Ihrem HTML-Body-Tag eine Klasse hinzu:

  ...

Standardverhalten in Ihrem CSS, zum Beispiel das Fetten von Links beim Überfahren:

body.use-hover a:hover
  font-weight: bold

Und in Ihrem JS wird beim Ausführen das Standardverhalten entfernt und etwas anderes getan:

$(function() {
  $('body').removeClass('use-hover');
  $('a').live('mouseover', function() {
    // Tun Sie etwas, wenn der Mauszeiger darüber schwebt
  }).live('mouseout', function() {
    // Tun Sie etwas, nachdem der Mauszeiger verloren wurde
  });
});

Answer 4

Sie könnten alle :hover-Stilregeln aus document.styleSheets entfernen.

Gehen Sie einfach alle CSS-Stile mit JavaScript durch und entfernen Sie alle Regeln, die ":hover" in ihrem Selektor enthalten. Ich verwende diese Methode, wenn ich :hover-Stile aus Bootstrap 2 entfernen muss.

_.each(document.styleSheets, function (sheet) { 
    var rulesToLoose = []; 
    _.each(sheet.cssRules, function (rule, index) { 
        if (rule.selectorText && rule.selectorText.indexOf(':hover') > 0) { 
            rulesToLoose.push(index);
        }
    });

    _.each(rulesToLoose.reverse(), function (index) {
        if (sheet.deleteRule) {
            sheet.deleteRule(index);
        } else if (sheet.removeRule) {
            sheet.removeRule(index);
        }
    });
});

Ich habe underscore verwendet, um Arrays zu durchlaufen, aber man könnte sie auch mit einer reinen js-Schleife schreiben:

for (var i = 0; i < document.styleSheets.length; i++) {}