2011-01-14 33 views
0
<ul> 
    <li class="hoverMe"><div class="secret">Haha</div></li> 
    <li class="hoverMe"><div class="secret">Blabla</div></li> 
    <li class="hoverMe"><div class="secret">Tada</div></li> 
</ul> 

Secred divs in CSS versteckt sind:jQuery dieses Kind wählen

.secret { 
    display: none; 
} 

Ich will nach Schweben „hoverMe‘ das Geheimnis Kind „hoverMe“ angezeigt wird (so, wenn der Benutzer schwebt eine Verbindungsnummer er sieht "Haha", nubmer zwei "Blabla" etc.).

Ich habe diesen Code ausprobiert und es funktioniert nicht. Ich habe versucht "next" durch "child (ren)" usw. zu ersetzen, aber nichts .. Keine Ideen?

jQuery().ready(function() { 

       jQuery('.hoverMe').hover(function(){ 
        jQuery(this).next('.secret').Toggle(); 
       }); 
      }); 

Das seltsame Ding ist (this) .children() schaltet alle Kinder ein, aber wenn ich mit (this) .children ('. Secret') versuche, tut es nichts.

+0

Sie Ihre Lösung bekommen oder nicht? – Vivek

Antwort

0

Wenn es dir je und es passiert nichts scheinen versuchen zu arbeiten, ein anderes Kind das Hinzufügen() an die Kette, oder Überprüfen Sie zumindest Ihr Markup, um sicherzustellen, dass Ihr Elternelement nicht wirklich ein GRANDparent ist.

Die Antwort war:

$(this).children().children().show(); 
0
  • Verwenden Sie children.
  • toggle muss mit einem kleinen Buchstaben beginnen.
  • Wichtig: Sie benötigen andere "sichtbare" Inhalt im Listenelement. Sonst dauert es kein Leerzeichen und es gibt nichts, über das Sie schweben können. Zumindest müssten Sie eine &nbsp; hinzufügen. Wie Sie in der Demo sehen können, habe ich diese hinzugefügt. Wenn Sie es entfernen, wird es nicht mehr funktionieren.

So sollte es sein:

jQuery('.hoverMe').hover(function(){ 
    jQuery(this).children('.secret').toggle(); 
}); 

Ihr bereit Handler auch falsch ist, muss sein:

jQuery(document).ready(function() { 
    //... 
}); 

DEMO

+0

Ich habe so versucht, nichts;/ – anonymous

+0

@anonymous: Bitte sehen Sie meine aktualisierte Antwort. –

2

hover() zwei Handler binden können:

$('.hoverMe').hover(function(){ 
    $(this).children().show(); 
}, function(){ 
    $(this).children().hide(); 
}) 

oder

$('.hoverMe').hover(function(){ 
    $(this).find('.secret').show(); 
}, function(){ 
    $(this).find('.secret').hide(); 
}) 

oder, wie @Felix Kling freundlich bemerkt, kann sie binden nur ein Griff mit:

$('.hoverMe').hover(
    $(this).find('.secret').toggle(); 
) 
+1

Nein, 'Hover' akzeptiert auch einen Handler. Es wird bei der Eingabe von * und * aufgerufen werden, so dass die OPs es mit "Toggle" verwenden, ist völlig in Ordnung. Siehe die Dokumentation: http://api.jquery.com/hover/ –

+0

Vielen Dank. Ich habe Korrektur gemacht, um zu antworten. – Krule

0
$(function(){ 
    $("ul li.hoverMe").hover(function(){ 
     $(this).children("div.secret").show(); 
    }, 
    function(){ 
     $(this).children("div.secret").hide(); 
    }); 
}); 
0
jQuery().ready(function() { 
       jQuery('.hoverMe').hover(function(){ 
        jQuery(this).children('.secret').**t**oggle(); 
       }); 
      }); 

JS Groß- und Kleinschreibung

+0

Und auch sollten Sie nicht display: none in diesem Fall, weil es keinen Platz in der Seite, die für Hover-Ereignis verantwortlich wäre, nehmen würde, sollten Sie Sichtbarkeit verwenden: ausgeblendet oder irgendwie Abmessungen des Elternelements angeben. – maga

1

Ihre .hoverme s sind leer (haben eine Höhe von 0) wenn .secret wird nicht angezeigt, es gibt also nichts, über den Sie den Mauszeiger halten können.

Sie werden visibility: hidden/visibility: visible statt

.secret { 
    visibility:hidden; 
} 

jQuery().ready(function() { 
    $(".hoverMe").hover(function() { 
    $(this).find(".secret").css("visibility", "visible"); 
    }, function() { 
    $(this).find(".secret").css("visibility", "hidden"); 
    }); 
}); 

Beispiel verwenden müssen: http://jsfiddle.net/bM7f2/