Wie definiere ich den CSS: Hover-Status in einem jQuery-Selektor?

70

Ich muss die Hintergrundfarbe eines Divs definieren auf: Bewegen Sie den Mauszeiger mit jQuery, aber Folgendes scheint nicht zu funktionieren: 

$(".myclass:hover div").css("background-color","red");

Wie kann ich das gleiche Ergebnis erzielen? Es ist wichtig, dass es mit jQuery gemacht wird, aber aus irgendeinem Grund funktioniert es nicht. Irgendwelche Vorschläge? Vielen Dank!

javascript jquery html css George
quelle
1
Versuchen Sie diese stackoverflow.com/questions/5986464/…
Gjohn
2
jQuery wählt Elemente aus; Es werden keine CSS-Regeln definiert. Selbst wenn das möglich gewesen wäre, würde es nicht tun, was Sie wollen.
SLaks
Pseudo-Selektoren sind technisch nicht Teil des DOM und können daher nicht mit JavaScript bearbeitet werden.
Blazemonger
1
Definieren Sie dazu eine CSS-Regel. Wenn Sie wirklich müssen, können Sie ein <style>Element, das die Regel enthält, programmgesteuert (mit JavaScript) einfügen, aber ich würde gerne hören, warum Sie die Regel in Ihrem eigenen Stylesheet nicht richtig definieren können.
Matt Ball
Ok, warte einen Moment, ich erstelle eine Geige, um das genaue Problem zu zeigen und warum es nicht über CSS gemacht werden kann
George

Antworten:

83

Ich würde vorschlagen, CSS über jquery zu verwenden (wenn möglich), sonst können Sie so etwas verwenden

$("div.myclass").hover(function() {
  $(this).css("background-color","red")
});

Sie können Ihren Selektor nach Bedarf ändern.

Wie von @ A.Wolff kommentiert: Wenn Sie diesen Hover-Effekt für mehrere Klassen verwenden möchten, können Sie ihn folgendermaßen verwenden

$(".myclass, .myclass2").hover(function(e) { 
    $(this).css("background-color",e.type === "mouseenter"?"red":"transparent") 
})

Js Fiddle Demo

Sachin
quelle
Das kann man machen, aber mein Problem ist, dass ich viele Selektoren habe ... Zum Beispiel sieht mein Code folgendermaßen aus: $ (". Logo, .logo-main, .logo-main: hover em, .another ,. eine andere: hover div "). css (" Hintergrund "," rot "); Deshalb möchte ich diese Methode vermeiden ..
George
2
Ich denke du meinst:$(".myclass").hover(function(e) { $(this).find('div').css("background-color",e.type === "mouseenter"?"red":"transparent") });
A. Wolff
Diese Antwort ist für diese Frage richtig. Sie ändern die Auswahl nach Ihren Wünschen.
JerryHuang.me
1
@ George Schau dir deine Selektoren an, du willst einen roten Hintergrund für die normale Klasse sowie für ihren :hoverZustand. Warum geben Sie sie nicht einfachbackground:red
Sachin
@Sachin Ich verstehe nicht, was du hier meinst: "Schau dir deine Selektoren an, du willst einen roten Hintergrund für die normale Klasse sowie für ihren Schwebezustand"?
A. Wolff
28

Sie können dies versuchen:

$(".myclass").mouseover(function() {
    $(this).find(" > div").css("background-color","red");
}).mouseout(function() {
    $(this).find(" > div").css("background-color","transparent");
});

DEMO

Rahil Wazir
quelle
17

Ich weiß, dass dies eine akzeptierte Antwort hat, aber wenn jemand darauf stößt, kann meine Lösung helfen.

Ich habe diese Frage gefunden, weil ich einen Anwendungsfall habe, in dem ich den Schwebezustand: für Elemente einzeln deaktivieren wollte. Da dies im DOM nicht möglich ist, können Sie auch eine Klasse in CSS definieren, die den Schwebezustand überschreibt.

Zum Beispiel die CSS:

.nohover:hover {
    color: black !important;
}

Dann mit jQuery:

$("#elm").addClass("nohover");

Mit dieser Methode können Sie so viele DOM-Elemente überschreiben, wie Sie möchten, ohne Tonnen von onHover-Ereignissen zu binden.

Funkju
quelle
hatte gerade die gleiche Situation wie beschrieben. schöne Lösung
Xperator
15

Nun, Sie können nicht hinzufügen Styling mit Pseudo-Selektoren wie :hover, :after, :nth-childoder irgendetwas wie das mit jQuery.

Wenn Sie eine solche CSS-Regel hinzufügen möchten, müssen Sie ein <style>Element erstellen und diese :hoverRegel wie in CSS hinzufügen . Dann müssten Sie dieses <style>Element zur Seite hinzufügen .

Die Verwendung der .hoverFunktion scheint angemessener zu sein, wenn Sie das CSS nicht einfach einem Stylesheet hinzufügen können, sondern darauf bestehen, dass Sie Folgendes tun können:

$('head').append('<style>.myclass:hover div {background-color : red;}</style>')

Wenn Sie mehr über das Hinzufügen von CSS mit Javascript erfahren möchten, lesen Sie einen der Blog-Beiträge von David Walsh .

Arjabbar
quelle
3

Verwenden Sie JQuery Hover, um beim Schweben eine Klasse oder einen Stil hinzuzufügen / zu entfernen: 

$( "mah div" ).hover(
  function() {
    $( this ).css("background-color","red");
  }, function() {
    $( this ).css("background-color",""); //to remove property set it to ''
  }
);
GorvGoyl
quelle
1

Es ist jedoch zu spät, aber das beste Beispiel, wie man ein Pseudoelement im jQuery-Stil hinzufügt

 $(document).ready(function(){
 $("a.dummy").css({"background":"#003d79","color":"#fff","padding": "5px 10px","border-radius": "3px","text-decoration":"none"});
 $("a.dummy").hover(function() {
            $(this).css("background-color","#0670c9")
          }).mouseout(function(){
              $(this).css({"background-color":"#003d79",});
          });
 
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<a class="dummy" href="javascript:void()">Just Link</a>
Erweitern Sie das Snippet

veera
quelle