Wie Entferne ich den :hover?

Ich habe ein kleines problem mit einem script.

Ich möchte eine Standard-Aktion auf :hover für clients mit deaktiviertem Javascript, sondern auch für diejenigen mit Javascript aktiviert ist möchte ich eine weitere Aktion (eigentlich... gleiche Aktion, aber ich wollen, fügen Sie eine kleine transition-Effekt).

So... Wie kann ich dies tun? Ich bin mit jQuery.

InformationsquelleAutor der Frage Ionuț Staicu | 2009-01-12

javascript jquery

29

Gelten zwei Klassen der relvant element. enthält das hover-Verhalten, und enthält alle anderen styling.

Können Sie dann verwenden Sie die jquery
```
$(element).removeClass('hover');
```
Methode zu entfernen, die Klasse mit den hover-Verhalten und dann anwenden, was Sie wollen mit
```
$(element).bind('mouseover', function () { doSomething(); });
$(element).bind('mouseout', function () { doSomething(); });
```
InformationsquelleAutor der Antwort benlumley
17

Wie über das setzen der :hover fallen-zurück in ein stylesheet wird nur geladen, wenn javascript deaktiviert ist?
```
<noscript>
  <link href="noscript.css" rel="stylesheet" type="text/css" />
</noscript>
```
InformationsquelleAutor der Antwort foxy

Hier ist eine Lösung ohne hack Klassen:

CSS:

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

jQuery (verwendet jQueryUI zu animieren Farbe):

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

demo

InformationsquelleAutor der Antwort kingjeffrey

3

Ich denke, der beste Ansatz wäre, zu verlassen, die :hover Verhalten als fall-back für nicht-javascript-Benutzer und verwenden Sie dann JQuery zu erstellen, mouseover-und mouseout-Ereignis-Handler zu erstellen, der einen anderen Effekt für javascript-fähigen Benutzer.

JQuery Javascript-Bibliothek - Events/mouseover

InformationsquelleAutor der Antwort Andrew Hare
2

Es ist eine sehr alte Frage, aber ich fühle den Drang, zu sagen, dass modernizr bietet eine sehr gute Möglichkeit, um die Umsetzung dieser Art von fallbacks.

Gehören einfach modernizr im head-und Sie können diese:
```
.no-js a:hover {
   set background color and stuff like that
   for cases when no javascript is present
}
```
Auf der anderen Seite, wenn Sie dies tun wollen, den anderen Weg, und nur setzen Sie css, wenn js vorhanden ist
```
.js a:hover {
   set background color to default
   and the text decoration
}
```
Es ist mehr oder weniger die gleiche Lösung wie das hinzufügen eines hover-tag für das markup, aber ein wenig mehr robust.

InformationsquelleAutor der Antwort SoonDead

ICH GEFUNDEN HABEN, IHRE LÖSUNG

grundsätzlich beginnen Sie, indem Sie neu definieren, was du getan hast mit der css-hover.
(natürlich würden Sie dies tun, indem Sie dynamisch ziehen die Informationen aus dem style)
dann tun Sie, was Sie wollen in jquery mouseover - /mouseout-events

dies ermöglicht Ihnen, halten die :hover-Ereignis in Ihrem css denn jquery ist die Bindung Ihres ursprünglichen Stile, um das element. Im wesentlichen deaktivieren die :hover-event.

wenn Ihr css ist:

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

Ihre jquery wäre so etwas wie:

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

  var oldBackgroundColor = jQuery(this).css("backgroundColor");
  var oldBackgroundPosition = jQuery(this).css("backgroundPosition");

  jQuery(".class").css({
        'backgroundColor':oldBackgroundColor,
        'backgroundPosition':oldBackgroundPosition
  });

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

  doSomething();

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

  doSomething();

})

InformationsquelleAutor der Antwort Chico Web Design

0

Kann man Global aktivieren Verhalten über das gesamte Dokument durch die Verwendung einer einzigen css-Regel, und deaktivieren Sie dann, dass in der Regel eine Anweisung in javascript, die während der Installation der neuen event-handler.

Fügen Sie eine Klasse, um Ihren html-body-tag:
```
<html>
  <body class="use-hover">
  ...
```
Standardverhalten in Ihrem css, sagen wir mal Fett links auf hover:
```
body.use-hover a:hover
  font-weight: bold
```
- Und in deiner js, wenn Sie ausgeführt wird, entfernen Sie das standardmäßige Verhalten und tun etwas anderes:
```
$(function() {
  $('body').removeClass('use-hover');
  $('a').live('mouseover', function() {
    //Do something when hovered
  }).live('mouseout', function() {
    //Do something after hover is lost
  });
});
```
InformationsquelleAutor der Antwort aceofspades

Könnten Sie Streifen alle :hover-style-Regeln aus dem Dokument.styleSheets.

Gehen Sie einfach durch alle CSS-styles mit JavaScript und entfernen Sie alle Regeln, die enthalten ":hover" im Selektor. Ich benutze diese Methode, wenn ich brauche zu entfernen, die :hover-styles von bootstrap 2.

_.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 Untermalung für die Iteration von arrays, aber man könnte schreiben, diese mit reinem js-Schleife:

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

InformationsquelleAutor der Antwort Mikael Lepistö

You can redraw element after click
function redraw(element) {
if (!element) { return; }

let n = document.createTextNode(' ');
let disp = element.style.display;  //don't worry about previous display style

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

setTimeout(function(){
    element.style.display = disp;
    n.parentNode.removeChild(n);
}, 100); //you can play with this timeout to make it as short as possible

}

InformationsquelleAutor der Antwort Artemiy StagnantIce Alexeew

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.