Zunächst gehe ich davon aus, dass dies für CSS3 zu komplex ist, aber wenn es irgendwo eine Lösung gibt, würde ich stattdessen gerne damit anfangen.
Der HTML-Code ist ziemlich einfach.
<div class="parent">
<div class="child">
Text Block 1
</div>
</div>
<div class="parent">
<div class="child">
Text Block 2
</div>
</div>
Das untergeordnete div wird so eingestellt, dass Folgendes angezeigt wird: none; standardmäßig, ändert sich dann aber zur Anzeige: block; wenn die Maus über dem übergeordneten div bewegt wird. Das Problem ist, dass dieses Markup an mehreren Stellen auf meiner Website angezeigt wird und ich möchte, dass das Kind nur angezeigt wird, wenn sich die Maus über dem übergeordneten Element befindet, und nicht, wenn sich die Maus über einem der anderen übergeordneten Elemente befindet (alle haben dieselbe Klasse Name und keine IDs).
Ich habe versucht, $(this)
und .children()
ohne Erfolg.
$('.parent').hover(function(){
$(this).children('.child').css("display","block");
}, function() {
$(this).children('.child').css("display","none");
});
quelle
:hover
ist eine der von CSS2 definierten "dynamischen Pseudoklassen" ( hier die Spezifikation ). Hier ist ein kurzes Beispiel: http://jsfiddle.net/5FLr4/ . Für mich geht das..parent:not(:hover) .child { display: none; }
scheint für mich gut zu funktionieren, obwohl ich mir sicherlich keine Sorgen um IE6 mache. Aber auf diese Weise kann ich es für Elemente verwenden, für die ich keine einheitlichedisplay
Eigenschaft haben möchte .Sie müssen weder JavaScript noch JQuery verwenden, CSS reicht aus:
SIEHE DEMO
quelle
Verwenden Sie
toggleClass()
.Wo
color
ist die Klasse? Sie können die Klasse so gestalten, wie Sie möchten, um das gewünschte Verhalten zu erzielen. Das Beispiel zeigt, wie eine Klasse beim Ein- und Ausfahren mit der Maus hinzugefügt und entfernt wird.Check Arbeiten Beispiel hier .
quelle
quelle
Stephens Antwort ist richtig, aber hier ist meine Anpassung seiner Antwort:
HTML
CSS
jQuery
Sie können dieses Beispiel bei jsFiddle sehen .
quelle
Ich habe eine meiner Meinung nach bessere Lösung, da sie auf mehrere Ebenen skalierbar ist, so viele wie gewünscht, nicht nur zwei oder drei.
Ich benutze Ränder, aber es kann auch mit jedem gewünschten Stil gemacht werden, wie Hintergrundfarbe.
Mit der Grenze ist die Idee:
Sie können es unter folgender Adresse testen: http://jsbin.com/ubiyo3/13
Und hier ist der Code:
quelle
Wenn Sie Twitter Bootstrap Styling und Base JS für ein Dropdown-Menü verwenden:
Dies ist das fehlende Teil, um Sticky-Dropdowns zu erstellen (die nicht nerven)
quelle
Ich bin mir nicht sicher, ob es schreckliche Gründe dafür gibt oder nicht, aber es scheint mit mir auf der neuesten Version von Chrome / Firefox ohne sichtbare Leistungsprobleme mit ziemlich vielen Elementen auf der Seite zu funktionieren.
Auf diese Weise müssen Sie lediglich
parent-hover-show
auf ein Element anwenden , und der Rest wird erledigt. Sie können den gewünschten Standardanzeigetyp beibehalten, ohne dass er immer "blockiert" oder für jeden Typ mehrere Klassen erstellt.quelle
Um es von CSS zu ändern, müssen Sie nicht einmal die untergeordnete Klasse festlegen
quelle