jQuery zu target CSS a: Hover-Klasse

Verwirrt hier. Was ist der beste Weg, um den Hover-CSS des Links unten zu ändern, und wie? toggle.Class? hinzufügen.Klasse? Ich möchte ein Bild im Hover anzeigen. Ich bin in der Lage, die Farbe des Textes mitjQuery zu target CSS a: Hover-Klasse

$("#menu-item-1099 a:contains('rss')").css("color", "#5d5d5d");

zu ändern, aber scheint nicht die Hover-Klasse zu tarnen.

<div id="access"> 
<div class="menu-header"> 
<ul id="menu-main-menu" class="menu"> 
<li id="menu-item-1099" class="menu-item menu-item-type-custom menu-item-1099"> 
<a href="http://mydomain.com/feed/">rss</a></li>

Quelle

2011-01-05 markratledge

Wenn Sie .css() in jQuery verwenden, ändern Sie nicht wirklich die CSS-Datei/Erstellen neuer CSS-Regeln. Sie fügen CSS einfach dem Attribut 'style' bestimmter Elemente hinzu (Inline-CSS).

So können Sie nicht „zielen auf die Hover-Klasse“ - Sie etwas auf schweben zu tun haben, in, und dass auf schweben zufällt aus:

$("#menu-item-1099 a:contains('rss')").hover(function() { 
    // Hover in, show an img 
    $(this).after("<img src='blah.jpg'>"); 
    // Or alternatively 
    $(this).addClass("hasImage"); // Where there is a CSS rule for .hasImage 
}, function() { 
    // Hover out, remove the img 
    $(this).next().remove(); 
    // Or alternatively 
    $(this).removeClass("hasImage"); 
});

Quelle

2011-01-05 05:36:23

+1. Bax9-Code ist gut als mein Code. weil es Bild hinzufügt, aber mein Code wird einfache Farbe hinzufügen – AEMLoviji

Interessant. Vielleicht gibt es einen besseren Weg zu tun, was ich versuche zu tun? Um das CSS tatsächlich zu ändern, anstatt es hinzuzufügen? D.h., wie kann man die Farbe des Textes "rss" im Link ändern? Ich kann den obigen Code nicht zum funktionieren bringen. Ich habe es mit einem dynamisch generierten Menü zu tun, und das spielt bei der Ausführung des JS mit dem Dokument "ready" keine Rolle. – markratledge

@songdogtech, Ich bin mir nicht sicher, was Sie mit "change the css" meinen. Wenn Sie über das Ändern der CSS-Datei sprechen, dann können Sie das tun, aber es wird nicht empfohlen. Der obige Code funktioniert möglicherweise nicht, wenn das Menü dynamisch generiert wird. Stattdessen müssen Sie '.live' verwenden. Aber wenn Sie nur einen hervorgehobenen Link suchen, warum können Sie nicht allen generierten '' eine Klasse zuweisen und diese Klasse direkt in Ihrem CSS referenzieren? –

$('a:contains('rss')').live('mouseover mouseout', function (event) { 
       if (event.type == 'mouseover') { 
        $(this).css('background-color', '#FFFF99'); 
       } else { 
        $(this).css('background-color', '#FFFFFF'); 
       } 
      });

es ist einfach so, wie es zu machen. Wenn Sie mouseover können Sie Ihr Bild zeigen, wenn mouseout Sie können Ihr Bild entfernen

Quelle

2011-01-05 05:34:46 AEMLoviji

Sie können auf dem Element verwenden .hover, wie diese

$("#menu-item-1099 a:contains('rss')").hover(function(){ 
     //change the bacjgound picture 
      $(this).addClass("all the class"); 
     }, function(){ 

        //remove it 
      $(this).removeClass("all the class"); 
      });

wenn Sie verwenden möchten .toggle()

$("#menu-item-1099 a:contains('rss')").hover(function(){ 
      $(this).toggleClass(list the class); 
       });

Sie benötigen nur eine Klasse auf Ihrem Stylesheet zu erstellen, machen der Hintergrund das Bild, das Sie wollen, und setzen Sie es hier

Quelle

2011-01-05 05:45:36 tkt986

jQuery zu target CSS a: Hover-Klasse

Antwort

Verwandte Themen