Utilizzando solo CSS, mostra div al passaggio del mouse su <a>

Vorrei mostrare un div quando qualcuno passa sopra un <a>elemento, ma vorrei farlo in CSS e non in JavaScript. Sai come raggiungere questo obiettivo?

Si può fare qualcosa di simile a questo :

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

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

Questo utilizza il selettore fratello adiacente ed è la base del menu a discesa del pollone .

HTML5 consente agli elementi di ancoraggio di avvolgere quasi tutto, quindi in tal caso l' divelemento può essere creato come figlio dell'ancoraggio. In caso contrario, il principio è lo stesso: utilizzare la :hoverpseudo-classe per modificare la displayproprietà di un altro elemento.

.showme {
  display: none;
}

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

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

jsfiddle

Poiché questa risposta è popolare, penso che sia necessaria una piccola spiegazione. Usando questo metodo quando passi con il mouse sull'elemento interno, non scomparirà. Poiché .showme è all'interno di .showhim, non scompare quando si sposta il mouse tra le due righe di testo (o qualunque cosa sia).

Questi sono esempi di quirq di cui devi occuparti durante l'implementazione di tale comportamento.

Dipende tutto da cosa ti serve. Questo metodo è migliore per uno scenario in stile menu, mentre quello di Yi Jiang è migliore per i tooltip.

Ho scoperto che usare l'opacità è migliore, ti permette di aggiungere transizioni css3 per creare un piacevole effetto hover finito. Le transizioni verranno semplicemente ignorate dai browser IE precedenti, quindi degrada con garbo.

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

Sono sicuramente un esperto, ma sono incredibilmente orgoglioso di me stesso per aver elaborato qualcosa su questo codice. Se fate:

div {
    display: none;
}

a:hover > div {
    display: block;
} 

(Nota '>') Puoi contenere tutto in un tag, quindi, fino a quando il tuo trigger (che può essere nel suo div, o direttamente nel tag a, o qualsiasi cosa tu voglia) è fisicamente toccante il div rivelato, puoi spostare il mouse dall'uno all'altro.

Forse questo non è molto utile, ma ho dovuto impostare il overflow del mio div rivelato: auto, quindi a volte aveva barre di scorrimento, che non potevano essere utilizzate non appena ti allontanavi dal div.

Infatti, dopo aver finalmente capito come creare il div rivelato (anche se ora è figlio del trigger, non un fratello), siediti dietro il trigger, in termini di z-index, (con un piccolo aiuto da questa pagina : Come far apparire un elemento genitore sopra il figlio ) non devi nemmeno passare sopra il div rivelato per farlo scorrere, resta semplicemente sopra il grilletto e usa la ruota, o altro.

Il mio div rivelato rivela la maggior parte della pagina, quindi questa tecnica la rende molto più permanente, piuttosto che lo schermo che lampeggia da uno stato all'altro con ogni mossa del mouse. In realtà è davvero intuitivo, quindi perché sono davvero abbastanza orgoglioso di me stesso.

L'unico aspetto negativo è che non è possibile inserire collegamenti all'interno di tutto, ma è possibile utilizzare tutto come un unico collegamento.

Questa risposta non richiede che tu sappia quale tipo di display (in linea, ecc.) Dovrebbe essere l'elemento nascosto quando viene mostrato:

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

Questo utilizza il selettore fratello adiacente e il selettore non .

Vorrei offrire questa soluzione modello per scopi generici che si espande sulla soluzione corretta fornita da Yi Jiang's.

I vantaggi aggiuntivi includono:

• supporto per il passaggio del mouse su qualsiasi tipo di elemento o più elementi;
• il popup può essere qualsiasi tipo di elemento o insieme di elementi, inclusi gli oggetti;
• codice auto-documentante;
• assicura che il pop-up appaia sugli altri elementi;
• una solida base da seguire se si sta generando codice HTML da un database.

Nel codice HTML inserisci la seguente struttura:

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

Nel CSS inserisci la seguente struttura:

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

Alcuni punti da notare sono:

1. Poiché la posizione di div.popup è impostata su fissa (funzionerebbe anche in modo assoluto), il contenuto non è all'interno del normale flusso del documento, il che consente all'attributo visibile di funzionare bene.
2. z-index è impostato per garantire che div.popup appaia sopra gli altri elementi della pagina.
3. Information_popup_container è impostato su dimensioni ridotte e pertanto non è possibile passare il mouse sopra.
4. Questo codice supporta solo il passaggio del mouse sopra l'elemento div.information. Per supportare il passaggio del mouse su div.information e div.popup, vedere Hover Over The Popup di seguito.
5. È stato testato e funziona come previsto in Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 e Google Chrome 28.0.15.

Passa il mouse sopra il popup

Come ulteriori informazioni. Quando il popup contiene informazioni che potresti voler tagliare e incollare o contiene un oggetto con cui potresti voler interagire, sostituisci prima:

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

con

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

E in secondo luogo, regolare la posizione di div.popup in modo che vi sia una sovrapposizione con div.information. Alcuni pixel sono sufficienti per garantire che div.popup sia in grado di ricevere il passaggio del mouse quando si sposta il cursore da div.information.

Questo non funziona come previsto con Internet Explorer 10.0.9200 e funziona come previsto con Opera 12.16, Firefox 18.0 e Google Chrome 28.0.15.

Vedi violino http://jsfiddle.net/F68Le/ per un esempio completo con un menu a più livelli popup.

per favore prova questo codice

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

La +consentono 'selezionare' solo il primo elemento non nidificato, gli >elementi nidificati selezionare solo - il migliore è quello di utilizzare ~che permettono di selezionare elemento arbitrario, che è figlio di genitori si libravano elemento. Utilizzando l'opacità / larghezza e la transizione è possibile fornire un aspetto uniforme

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>

Per me, se voglio interagire con il div nascosto senza vederlo scomparire ogni volta che lascio l'elemento scatenante (a in tal caso) devo aggiungere:

div:hover {
    display: block;
}

Sulla base della risposta principale, questo è un esempio, utile per visualizzare un suggerimento informativo quando si fa clic su un ?vicino a un collegamento:

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>

Dai miei test usando questo CSS:

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

E questo HTML:

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

, è risultato che si espande utilizzando il secondo, ma non si espande utilizzando il primo. Quindi se c'è un div tra il bersaglio al passaggio del mouse e il div nascosto, allora non funzionerà.

HTML

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

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen: passa il mouse su div mostra il testo in un altro div

Non dimenticare. se stai cercando di passare il mouse su un'immagine, devi metterla in un contenitore. css:

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

.brand-sales {
    display: none;
}

Se passi con il mouse su questo:

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

Questo mostrerà:

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