Ändern des CSS des untergeordneten Elements, wenn der Mauszeiger über das Element bewegt wird

159

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");
        });

— Hartley Brody
quelle

259

Warum nicht einfach CSS verwenden?

.parent:hover .child, .parent.hover .child { display: block; }

und fügen Sie dann JS für IE6 hinzu (z. B. in einem bedingten Kommentar), das nicht unterstützt: Hover richtig:

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

Hier ist ein kurzes Beispiel: Geige

— Stephen
quelle

Dieser Code funktioniert bei mir nicht. soll es ".parent.hover" und nicht ".parent: hover" sagen? Fall, ich habe noch nie gesehen, was Sie haben. und bedeutet ein Komma nicht, dass mehrere Selektoren dieselben Stile verwenden? Ich sehe nicht, wie das hier hilft. ein wenig mehr Infos zu diesem CSS, por favor 0 =]

— Hartley Brody

6

:hoverist eine der von CSS2 definierten "dynamischen Pseudoklassen" ( hier die Spezifikation ). Hier ist ein kurzes Beispiel: http://jsfiddle.net/5FLr4/ . Für mich geht das.

— Lee

ahh vielen dank! Ich hatte tatsächlich eine relative Positionierung, die den untergeordneten Text aus dem Blickfeld drückte ... doh! >. <Ich schätze die Hilfe!

— Hartley Brody

Anscheinend funktioniert dies nicht für .child :: - webkit-scrollbar-thumb, wenn Sie die Hervorhebung der Bildlaufleiste im untergeordneten Element ändern möchten.

— Donnerstag,

1

.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 einheitliche displayEigenschaft haben möchte .

— Blair Connolly

147

Sie müssen weder JavaScript noch JQuery verwenden, CSS reicht aus:

.child{ display:none; }
.parent:hover .child{ display:block; }

SIEHE DEMO

— Ali Adravi
quelle

9

Verwenden Sie toggleClass().

$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});

Wo colorist 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 .

— Hussein
quelle

7

.parent:hover > .child {
    /*do anything with this child*/
}

— Amir Rahman
quelle

3

Stephens Antwort ist richtig, aber hier ist meine Anpassung seiner Antwort:

HTML

<div class="parent">
    <p> parent 1 </p>
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <p> parent 2 </p>
    <div class="child">
        Text Block 2
    </div>
</div>

CSS

.parent { width: 100px; min-height: 100px; color: red; }
.child { width: 50px; min-height: 20px; color: blue; display: none; }
.parent:hover .child, .parent.hover .child { display: block; }

jQuery

//this is only necessary for IE and should be in a conditional comment

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

Sie können dieses Beispiel bei jsFiddle sehen .

— Roger Roelofs
quelle

3

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:

Haben Sie eine andere Randfarbe nur ein Div, das Div über, wo sich die Maus befindet, nicht auf einem Elternteil, nicht auf einem Kind, so dass es nur einen solchen Div-Rand in einer anderen Farbe sehen kann, während der Rest auf Weiß bleibt.

Sie können es unter folgender Adresse testen: http://jsbin.com/ubiyo3/13

Und hier ist der Code:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

</style>
</head>
<body>
  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>
</body>
</html>

— z666zz666z
quelle

Dies macht nicht das, was die Frage gestellt hat. Es ändert den Rand um das Element, über dem der Mauszeiger bewegt wird. Nicht die Grenze um ein untergeordnetes Element.

— Jenniwren

2

Wenn Sie Twitter Bootstrap Styling und Base JS für ein Dropdown-Menü verwenden:

.child{ display:none; }
.parent:hover .child{ display:block; }

Dies ist das fehlende Teil, um Sticky-Dropdowns zu erstellen (die nicht nerven)

Das Verhalten ist zu:
1. Bleiben Sie geöffnet, wenn Sie darauf klicken, und schließen Sie, wenn Sie erneut auf eine andere Stelle auf der Seite klicken
2. Wird automatisch geschlossen, wenn die Maus aus den Menüelementen herausrollt.

— R Tobin
quelle

2

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.

*:not(:hover)>.parent-hover-show{
    display:none;
}

Auf diese Weise müssen Sie lediglich parent-hover-showauf 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.

— Brian Leishman
quelle

0

Um es von CSS zu ändern, müssen Sie nicht einmal die untergeordnete Klasse festlegen

.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }

— hamboy75
quelle