Zeigen Sie div beim Bewegen des Mauszeigers über <a> an, indem Sie nur CSS verwenden

Ich möchte ein div anzeigen, wenn jemand über einem <a>Element schwebt , aber ich möchte dies in CSS und nicht in JavaScript tun. Wissen Sie, wie dies erreicht werden kann?

Sie können so etwas wie tun dies :

div {
    display: none;
}
    
a:hover + div {
    display: block;
}

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

Dies verwendet den benachbarten Geschwister-Selektor und ist die Grundlage des Dropdown-Menüs Suckerfish .

Mit HTML5 können Ankerelemente fast alles umschließen. In diesem Fall kann das divElement dem Anker untergeordnet werden. Ansonsten ist das Prinzip dasselbe - verwenden Sie die :hoverPseudoklasse, um die displayEigenschaft eines anderen Elements zu ändern .

.showme {
  display: none;
}

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

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

jsfiddle

Da diese Antwort beliebt ist, denke ich, dass eine kleine Erklärung erforderlich ist. Wenn Sie mit dieser Methode über das interne Element fahren, wird es nicht ausgeblendet. Da sich die .showme in .showhim befindet, verschwindet sie nicht, wenn Sie die Maus zwischen den beiden Textzeilen bewegen (oder was auch immer).

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

Es hängt alles davon ab, wofür Sie das brauchen. Diese Methode eignet sich besser für ein Szenario im Menüstil, während die von Yi Jiang für QuickInfos besser geeignet ist.

Ich fand, dass die Verwendung der Deckkraft besser ist. Sie können CSS3- Übergänge hinzufügen , um einen schönen fertigen Hover-Effekt zu erzielen. Die Übergänge werden nur von älteren IE-Browsern gelöscht, sodass sie sich ordnungsgemäß verschlechtern.

#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>

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

div {
    display: none;
}

a:hover > div {
    display: block;
} 

(Beachten Sie das '>') Sie können das Ganze in einem Tag enthalten, solange sich Ihr Trigger (der sich in einem eigenen Div oder direkt in einem Tag befindet oder etwas, das Sie möchten) physisch berührt Mit dem aufgedeckten Div können Sie Ihre Maus von einem zum anderen bewegen.

Vielleicht ist dies nicht sehr nützlich, aber ich musste mein offenbartes Div auf Überlauf einstellen: auto, daher hatte es manchmal Bildlaufleisten, die nicht verwendet werden konnten, sobald Sie sich vom Div entfernen.

Nachdem Sie endlich herausgefunden haben, wie Sie das aufgedeckte Div erstellen können (obwohl es jetzt ein Kind des Auslösers ist, kein Geschwister), setzen Sie sich in Bezug auf den Z-Index hinter den Auslöser (mit ein wenig Hilfe von dieser Seite : So wird ein übergeordnetes Element über dem untergeordneten Element angezeigt über das untergeordnete ) Sie müssen nicht einmal über das aufgedeckte Div rollen, um es zu scrollen. Bewegen Sie den Mauszeiger über den Auslöser und verwenden Sie Ihr Rad oder was auch immer.

Mein aufgedecktes Div deckt den größten Teil der Seite ab, daher macht diese Technik sie viel dauerhafter, anstatt dass der Bildschirm bei jeder Bewegung der Maus von einem Zustand in einen anderen blinkt. Es ist wirklich intuitiv, deshalb bin ich wirklich ziemlich stolz auf mich.

Der einzige Nachteil ist, dass Sie keine Links in das Ganze einfügen können, aber Sie können das Ganze als einen großen Link verwenden.

Diese Antwort erfordert nicht, dass Sie wissen, welche Art von Anzeige (Inline usw.) das versteckte Element sein 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>

Dies verwendet den benachbarten Geschwister-Selektor und den Nicht-Selektor .

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

Die zusätzlichen Vorteile umfassen:

• Unterstützung für das Bewegen des Mauszeigers über einen beliebigen Elementtyp oder mehrere Elemente;
• Das Popup kann ein beliebiger Elementtyp oder eine beliebige Gruppe von Elementen sein, einschließlich Objekten.
• selbstdokumentierender Code;
• stellt sicher, dass das Popup über den anderen Elementen angezeigt wird;
• Eine solide Grundlage, die Sie befolgen sollten, wenn Sie HTML-Code aus einer Datenbank generieren.

Im HTML platzieren Sie die folgende Struktur:

<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 zu beachten sind:

1. Da die Position von div.popup auf fest gesetzt ist (würde auch mit absolut funktionieren), befindet sich der Inhalt nicht im normalen Fluss des Dokuments, wodurch das sichtbare Attribut gut funktioniert.
2. Der Z-Index wird festgelegt, um sicherzustellen, dass das div.popup über den anderen Seitenelementen angezeigt wird.
3. Der information_popup_container ist klein eingestellt und kann daher nicht über den Mauszeiger bewegt werden.
4. Dieser Code unterstützt nur das Bewegen des Mauszeigers über das div.information-Element. Um das Bewegen des Mauszeigers über div.information und div.popup zu unterstützen, lesen Sie unten den Mauszeiger über das Popup.
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 möglicherweise ausschneiden und einfügen möchten, oder ein Objekt enthält, mit dem Sie möglicherweise interagieren möchten, ersetzen Sie 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 Überlappung mit div.information gibt. Ein paar Pixel reichen aus, um sicherzustellen, dass das div.popup den Hover empfangen kann, wenn der Cusor von div.information wegbewegt wird.

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

Siehe Geige http://jsfiddle.net/F68Le/ für ein komplettes Beispiel mit einem Popup - Menü mit mehreren Ebenen.

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>

Das +zulässige 'Auswahl' nur erstes nicht verschachteltes Element, das >Auswahl nur verschachtelte Elemente - desto besser ist es, ~das zu verwenden, um ein beliebiges Element auszuwählen, das dem übergeordneten schwebenden Element untergeordnet ist. Mit Deckkraft / Breite und Übergang können Sie ein glattes Erscheinungsbild erzielen

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>

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

div:hover {
    display: block;
}

Basierend auf der Hauptantwort ist dies ein Beispiel, das nützlich ist, um einen Informationstooltip anzuzeigen, wenn Sie auf ?einen Link in der Nähe klicken :

document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; };

document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); }

document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block';
e.stopPropagation(); };

#help { opacity: 0; margin-left: 0.1em; padding: 0.4em; }
    
a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; }

#tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; }

<a href="">Delete all obsolete informations</a><span id="help">?</span>
<div id="tooltip">All data older than 2 weeks will be deleted.</div>

Aus meinen Tests mit diesem CSS:

.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

Und dieser HTML:

<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>

Es ergab sich, dass es mit dem zweiten erweitert wird, aber nicht mit dem ersten. Wenn es also ein Div zwischen dem Schwebeziel und dem versteckten Div gibt, funktioniert es nicht.

HTML

<div>
    <h4>Show content</h4>
</div>
<div>
  <p>Hello World</p>
</div>

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen: Bewegen Sie den Mauszeiger über div, um Text in einem anderen div anzuzeigen

Vergiss nicht. Wenn Sie versuchen, um ein Bild zu schweben, müssen Sie es um einen Container legen. CSS:

.brand:hover + .brand-sales {
    display: block;
}

.brand-sales {
    display: none;
}

Wenn Sie mit der Maus darüber fahren:

<span className="brand">
   <img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg" 
     alt"some image class="product-card-place-logo"/>
</span>

Dies wird zeigen:

<div class="product-card-sales-container brand-sales">
    <div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>