Wie Sie verhindern, dass jQuery mehrere Elemente abgleicht

Question

Ich versuche einen Rollover-Effekt mit jQuery zu erstellen. Ich habe ähnliche Dinge, aber weil ich versuche, einen Mouseover mit einem Objekt zu machen, das einen Link darin hat, habe ich Probleme.

Ich habe eine Level-2-Navigationsleiste. Die Platzhalter sind Tabellenzellen (schlecht weiß ich - aber es ist schon so gemacht). Ich möchte den Hintergrund von Weiß (#FFF) zu Dunkelgrau (# 999) ändern. Ich möchte auch den Text von dunkelgrau zu weiß ändern.

Da der Text ein Link ist, muss ich eine Klasse innerhalb des Link-Tags angeben, um sicherzustellen, dass es dunkelgrau ohne Unterstreichung ist und nicht standardmäßig auf den blauen, unterstrichenen Text.

Der Code, den ich geschrieben habe, bewirkt, dass alle Links von class = "subLink" sich von weiß auf grau ändern, wenn einer von ihnen "über" schwebt. Ich möchte nur, dass dies für den betreffenden Gegenstand geschieht - das heißt, der Hintergrund sollte grau werden und der Link sollte weiß werden.

HTML und jQuery sind unter: -

<td class="subMenuTD"><a href="newsletter.html" class="subLink">Newsletter</a></td> 
<td class="subMenuTD"><a href="news_archive.html" class="subLink">News Archive</a></td> 
<td class="subMenuTD"><a href="events.html">Events</a></td> 

---

$(".subMenuTD").hover(
        function() { 
        $(this).addClass("subMenuTDActive"); 
        $(".subLink").addClass("subLink-white"); 
        }, 
        function() {  
        $(this).removeClass("subMenuTDActive"); 
        $(".subLink").removeClass("subLink-white"); 
      } 
       ); 

Answer 1

einen Kontext Parameter an die Funktion $() hinzufügen.

$(".subLink") ->$(".subLink", this) wird jQuery nur ".subLink" s anpassen, die untergeordnete Elemente des angegebenen Kontextelements sind.

Answer 2

können Sie machen dies noch einfacher durch die Klasse nicht auf den Link hinzufügen, da Sie bereits eine Klasse an der Mutter td hinzufügen und können somit die Verbindung durch Verwendung von CSS Ziel:

-Code vor

$(".subMenuTD").hover(      
    function() { 
    $(this).addClass("subMenuTDActive");         
    $(".subLink").addClass("subLink-white"); 
    }, 
    function() { 
    $(this).removeClass("subMenuTDActive");         
    $(".subLink").removeClass("subLink-white"); 
    } 
); 

-Code nach

$(".subMenuTD").hover(      
    function() { 
    $(this).addClass("subMenuTDActive");  
    }, 
    function() { 
    $(this).removeClass("subMenuTDActive");  
    } 
); 

Neue CSS-Regel

.subMenuTDActive .subLink { 
    /* Add hover link styling here */ 
} 

Dies funktioniert, weil ".subMenuTDActive .subLink" eine höhere specitivity als ".subLink" hat, und wird somit die ".subLink" Regel außer Kraft setzen.

$(".subMenuTD").hover(
        function() { 
          $(this) 
           .addClass("subMenuTDActive") 
           .children(".subLink") 
           .addClass("subLink-white"); 
        }, 
        function() {    
          $(this) 
           .removeClass("subMenuTDActive"); 
           .children(".subLink") 
           .removeClass("subLink-white"); 
        } 
      ); 

Answer 3

Sie können AKX-Lösung oder verwenden. Alternativ können Sie tun:

$(this).children(".subLink") 

Answer 4

AKX Lösung richtig ist:

Answer 5

ich mit drthomas bin. Warum in aller Welt verwenden Sie Javascript überhaupt, wenn Sie nur CSS verwenden können?

.subMenuTD:hover { 
        background-color: #ccc; 
        } 

.subLink:hover { 
       color: #fff; 
       } 

Oder noch besser (ich denke), loszuwerden, die td-Elemente von Styling, die Sie auf der Beseitigung, nicht haben und sollen zu arbeiten, stellen Sie die Links als Anzeige: Block, und dann können Sie das erklären schweben Stil unter einem Element:

.subLink { 
      display: block; 
      } 

    .subLink:hover { 
       background-color: #ccc; 
       color: #fff; 
       } 

und wenn Sie keine Kontrolle über den hTML-Code haben oder Sie etwas unternehmenskritischen, die die gleiche bleiben auf dem Markup beruht, „es ist bereits Tabellen, ich weiß, klagen sie mich“ ist eine wirklich schlechte Ausrede. Hier ist Ihr Untermenü, sans Tabelle:

<ul class="subMenu"> 
<li><a href="newsletter.html">Newsletter</a></li> 
<li><a href="news_archive.html">News Archive</a></li> 
<li><a href="events.html">Events</a></li> 
</ul> 

Das dauerte etwa 30 Sekunden. Hier ist die CSS für die navbar/Rollover:

.subMenu li { 
      display: inline; 
      list-style: none; 
      } 

    .subMenu a { 
      color: #000; 
      background-color: #fff; 
      text-decoration: none; 
      display: block; 
      } 

    .subMenu a:hover { 
      color: #fff; 
      background-color: #ccc; 
      } 

, dass vielleicht mehr eine Minute dauerte, weil ich musste es hübsch aussehen.

Ich versuche nicht, ein Mobber zu sein oder auf dich herabzukommen, aber nicht semantischer Code ist nicht etwas, das ermutigt werden sollte, und wenn du Hilfe bei etwas suchst, würde ich mich nicht richtig fühlen zu wissen, dass es auf einer Site verwendet wurde, die nicht konform war.