Nur mit CSS, zeigen div auf Hover über ein anderes Element

Question

Ich möchte ein Div anzeigen, wenn jemand den Mauszeiger über ein <a> Element, aber ich würde dies gerne in CSS und nicht in JavaScript tun. Wissen Sie, wie dies erreicht werden kann?

Answer 1

Sie können z. B. Folgendes tun cette :

div {
    display: none;
}

a:hover + div {
    display: block;
}

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

Dabei wird die Selektor für benachbarte Geschwister und ist die Grundlage der Dropdown-Menü "Saugfisch .

HTML5 erlaubt es, dass Ankerelemente fast alles umschließen können, so dass in diesem Fall die div Element zu einem untergeordneten Element des Ankers gemacht werden kann. Ansonsten ist das Prinzip das gleiche - verwenden Sie die :hover Pseudoklasse, um die display Eigenschaft eines anderen Elements.

Answer 2

.showme {
  display: none;
}

.showhim:hover .showme {
  display: block;
}

<div class="showhim">HOVER ME
  <div class="showme">hai</div>
</div>

jsfiddle

Da diese Antwort sehr beliebt ist, halte ich eine kleine Erklärung für notwendig. Wenn Sie mit dieser Methode den Mauszeiger über das interne Element bewegen, wird es nicht verschwinden. Da die .showme innerhalb .showhim ist, wird es nicht verschwinden, wenn Sie Ihre Maus zwischen den beiden Textzeilen (oder was auch immer es ist) bewegen.

Dies sind Beispiele für Besonderheiten, auf die Sie bei der Implementierung eines solchen Verhaltens achten müssen.

Es kommt ganz darauf an, wofür Sie es brauchen. Diese Methode ist besser für ein menüähnliches Szenario geeignet, während Yi Jiang für QuickInfos besser geeignet ist.

Answer 3

Ich habe festgestellt, dass es besser ist, die Deckkraft zu verwenden, denn sie erlaubt es, die css3 Übergänge, um einen schönen fertigen Schwebeeffekt zu erzielen. Die Übergänge werden nur von älteren IE-Browsern fallen gelassen werden, so dass es anmutig zu degradiert.

#stuff {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#hover {
    width:80px;
    height:20px;
    background-color:green;
    margin-bottom:15px;
}
#hover:hover + #stuff {
    opacity: 1.0;
}

<div id="hover">Hover</div>
<div id="stuff">stuff</div>

Answer 4

Ich bin keineswegs ein Experte, aber ich bin unglaublich stolz auf mich, dass ich etwas über diesen Code herausgefunden habe. Wenn Sie das tun:

div {
    display: none;
}

a:hover > div {
    display: block;
} 

Beachten Sie die > , ein direkter untergeordneter Selektor.

Sie können die ganze Sache in einem a-Tag enthalten, dann, solange Ihr Auslöser (die in ihr eigenes div sein kann, oder gerade in der a-Tag, oder was auch immer Sie wollen) ist physisch berühren die enthüllt div, können Sie Ihre Maus von einem zum anderen zu bewegen.

Vielleicht ist das nicht sehr nützlich, aber ich musste mein aufgedecktes Div auf overflow: auto setzen, so dass es manchmal Bildlaufleisten hatte, die nicht verwendet werden konnten, sobald man sich von dem Div wegbewegte.

Nachdem ich endlich herausgefunden habe, wie man das aufgedeckte Div (obwohl es jetzt ein Kind des Auslösers und kein Geschwisterteil ist) in Bezug auf den Z-Index hinter dem Auslöser platzieren kann (mit ein wenig Hilfe von dieser Seite): Wie man ein übergeordnetes Element über einem untergeordneten Element erscheinen lässt ) müssen Sie nicht einmal über das aufgedeckte Div rollen, um es zu verschieben, sondern bleiben einfach über dem Auslöser stehen und benutzen Ihr Rad oder was auch immer.

Mein aufgedecktes Div deckt den größten Teil der Seite ab, so dass es mit dieser Technik viel dauerhafter ist, als wenn der Bildschirm bei jeder Mausbewegung von einem Zustand in einen anderen wechselt. Es ist wirklich intuitiv eigentlich, daher bin ich wirklich ziemlich stolz auf mich.

Der einzige Nachteil ist, dass Sie keine Links innerhalb des Ganzen setzen können, aber Sie können das Ganze als einen großen Link verwenden.

Answer 5

Für diese Antwort ist es nicht erforderlich, dass Sie die Art der Anzeige (Inline usw.) kennen, die das ausblendbare Element haben soll, wenn es angezeigt wird:

.hoverable:not(:hover) + .show-on-hover {
    display: none;
}

<a class="hoverable">Hover over me!</a>
<div class="show-on-hover">I'm a block element.</div>

<hr />

<a class="hoverable">Hover over me also!</a>
<span class="show-on-hover">I'm an inline element.</span>

Dabei wird die Selektor für benachbarte Geschwister et le nicht Selektor .