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

Ich möchte diese allgemeine Vorlagenlösung anbieten, die die korrekte Lösung von Yi Jiang erweitert.

Zu den zusätzlichen Leistungen gehören:

• Unterstützung für das Bewegen des Mauszeigers über einen beliebigen Elementtyp oder mehrere Elemente;
• das Popup kann ein beliebiger Elementtyp oder eine beliebige Menge von Elementen sein, einschließlich Objekten;
• selbst-dokumentierender Code;
• sorgt dafür, dass das Pop-up über den anderen Elementen erscheint;
• eine solide Grundlage, wenn Sie HTML-Code aus einer Datenbank erzeugen.

In der html-Datei wird die folgende Struktur verwendet:

<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
</div>

In der css platzieren Sie die folgende Struktur:

div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

Einige Punkte sind zu beachten:

1. Da die Position des div.popup auf fest eingestellt ist (würde auch mit absolut funktionieren), befindet sich der Inhalt nicht im normalen Fluss des Dokuments, so dass das Attribut visible gut funktioniert.
2. z-index wird gesetzt, um sicherzustellen, dass das div.popup über den anderen Seitenelementen erscheint.
3. Der information_popup_container ist auf eine kleine Größe eingestellt und kann daher nicht mit dem Mauszeiger überfahren werden.
4. Dieser Code unterstützt nur das Bewegen des Mauszeigers über das Element div.information. Um das Hovering über div.information und div.popup zu unterstützen, siehe Hover Over The Popup unten.
5. Es wurde getestet und funktioniert wie erwartet in Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 und Google Chrome 28.0.15.

Bewegen Sie den Mauszeiger über das Popup

Als zusätzliche Information. Wenn das Popup Informationen enthält, die Sie ausschneiden und einfügen möchten, oder ein Objekt enthält, mit dem Sie interagieren möchten, dann ersetzen Sie es zuerst:

div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

mit

div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

Und zweitens, passen Sie die Position von div.popup so an, dass es eine Überschneidung mit div.information gibt. Ein paar Pixel reichen aus, um sicherzustellen, dass das div.popup den Hover empfangen kann, wenn der Benutzer das div.information verlässt.

Dies funktioniert nicht wie erwartet mit Internet Explorer 10.0.9200 und funktioniert wie erwartet mit Opera 12.16, Firefox 18.0 und Google Chrome 28.0.15.

Siehe Fiedel http://jsfiddle.net/F68Le/ für ein vollständiges Beispiel mit einem mehrstufigen Popup-Menü.

Answer 2

En + select' nur das erste nicht verschachtelte Element zulassen, die > nur verschachtelte Elemente auswählen - besser ist die Verwendung von ~ die es ermöglichen, ein beliebiges Element auszuwählen, das untergeordnetes Element des übergeordneten Elements ist, über dem der Mauszeiger schwebt. Mit Deckkraft/Breite und Übergang können Sie ein glattes Erscheinungsbild bieten

div { transition: all 1s }
.ccc, .ggg { opacity: 0; color: red}
.ccc { height: 0 }

.aaa:hover ~ .bbb .ccc { opacity: 1; height: 34px }
.aaa:hover ~ .eee .fff .ggg { opacity: 1 }

<div class="aaa">Hover me... to see<br><br> </div>

<div class='bbb'>BBBBB
  <div class='ccc'>CCCCC
    <div class='ddd'>DDDDD</div>
  </div>
</div>

<div class='eee'>EEEEE
  <div class='fff'>FFFFF
    <div class='ggg'>GGGGG</div>
    <div class='hhh'>HHHHH</div>
  </div>
</div>

Answer 3

Bitte testen Sie diesen Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css"> 
div
{
display:none;
color:black
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */  

}

@keyframes myfirst
{
0%   {background:blue;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

 @-moz-keyframes myfirst /* Firefox */
{
0%   {background:white;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
}

a:hover + div{
display:inline;
} 
</style>
</head>
<body>
<a href="#">Hover over me!</a>
<div>the color is changing now</div>
<div></div>
</body>
</html>

Answer 4

Wenn ich mit dem ausgeblendeten Div interagieren möchte, ohne dass es jedes Mal verschwindet, wenn ich das auslösende Element (in diesem Fall a) verlasse, muss ich etwas hinzufügen:

div:hover {
    display: block;
}

Answer 5

Obwohl die Frage bereits gut beantwortet wurde, habe ich die Gelegenheit genutzt, um meine Antwort hier zu veröffentlichen. Schauen Sie sich einfach diese Seite in W3Schools an und Sie werden eine detaillierte Antwort erhalten

https://www.w3schools.com/css/css_combinators.asp