Usando solo CSS, muestre div al pasar el mouse sobre <a>

Me gustaría mostrar un div cuando alguien pasa el cursor sobre un <a>elemento, pero me gustaría hacerlo en CSS y no en JavaScript. ¿Sabes cómo se puede lograr esto?

Puedes hacer algo como esto :

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

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

Esto utiliza el selector de hermanos adyacentes , y es la base del menú desplegable de suckerfish .

HTML5 permite que los elementos de anclaje envuelvan casi cualquier cosa, por lo que en ese caso el divelemento puede hacerse hijo del ancla. De lo contrario, el principio es el mismo: use la :hoverpseudoclase para cambiar la displaypropiedad de otro elemento.

.showme {
  display: none;
}

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

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

jsfiddle

Como esta respuesta es popular, creo que se necesita una pequeña explicación. Usando este método cuando pasa el cursor sobre el elemento interno, no desaparecerá. Debido a que .showme está dentro de .showhim, no desaparecerá cuando mueva el mouse entre las dos líneas de texto (o lo que sea).

Estos son ejemplos de peculiaridades que debe tener en cuenta al implementar dicho comportamiento.

Todo depende de para qué lo necesites. Este método es mejor para un escenario de estilo de menú, mientras que Yi Jiang es mejor para la información sobre herramientas.

Descubrí que usar opacidad es mejor, le permite agregar transiciones css3 para hacer un bonito efecto de desplazamiento final. Las transiciones solo serán eliminadas por los navegadores IE más antiguos, por lo que se degrada con gracia.

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

Por cierto, soy un experto, pero estoy increíblemente orgulloso de mí mismo por haber resuelto algo sobre este código. Si lo haces:

div {
    display: none;
}

a:hover > div {
    display: block;
} 

(Tenga en cuenta el '>') Puede contener todo en una etiqueta, luego, siempre que su disparador (que puede estar en su propio div, o directamente en la etiqueta, o cualquier cosa que desee) se toque físicamente el div revelado, puedes mover tu mouse de uno a otro.

Tal vez esto no sea útil en gran medida, pero tuve que configurar mi div revelado para que se desbordara: automático, por lo que a veces tenía barras de desplazamiento, que no podían usarse tan pronto como te alejabas del div.

De hecho, después de averiguar cómo hacer el div revelado (aunque ahora es un elemento secundario del gatillo, no un hermano), siéntese detrás del gatillo, en términos de índice z, (con un poco de ayuda de esta página : Cómo hacer que un elemento padre aparezca sobre el hijo ) ni siquiera tiene que rodar sobre el div revelado para desplazarse, simplemente manténgase sobre el gatillo y use su rueda, o lo que sea.

Mi div revelado cubre la mayor parte de la página, por lo que esta técnica lo hace mucho más permanente, en lugar de que la pantalla parpadee de un estado a otro con cada movimiento del mouse. En realidad, es realmente intuitivo, por eso estoy muy orgulloso de mí mismo.

El único inconveniente es que no puedes poner enlaces dentro de todo, pero puedes usar todo como un gran enlace.

Esta respuesta no requiere que sepa qué tipo de visualización (en línea, etc.) se supone que debe ser el elemento ocultable cuando se muestra:

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

Esto usa el selector hermano adyacente y el selector no .

Me gustaría ofrecer esta solución de plantilla de propósito general que se expande en la solución correcta provista por Yi Jiang.

Los beneficios adicionales incluyen:

• soporte para desplazarse sobre cualquier tipo de elemento, o elementos múltiples;
• la ventana emergente puede ser cualquier tipo de elemento o conjunto de elementos, incluidos los objetos;
• código autodocumentado;
• asegura que la ventana emergente aparezca sobre los otros elementos;
• Una base sólida a seguir si está generando código html desde una base de datos.

En el html colocas la siguiente estructura:

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

En el CSS coloca la siguiente estructura:

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

Algunos puntos a tener en cuenta son:

1. Debido a que la posición de div.popup está establecida como fija (también funcionaría con absoluta), el contenido no está dentro del flujo normal del documento, lo que permite que el atributo visible funcione bien.
2. z-index se establece para garantizar que div.popup aparezca sobre los otros elementos de la página.
3. Information_popup_container está configurado en un tamaño pequeño y, por lo tanto, no se puede pasar por encima.
4. Este código solo admite el desplazamiento sobre el elemento div.information. Para soportar el desplazamiento sobre div.information y div.popup, vea Hover Over The Popup a continuación.
5. Ha sido probado y funciona como se esperaba en Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 y Google Chrome 28.0.15.

Pase el ratón sobre la ventana emergente

Como información adicional. Cuando la ventana emergente contiene información que tal vez desee cortar y pegar o un objeto con el que desee interactuar, primero reemplace:

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

Y segundo, ajuste la posición de div.popup para que se superponga con div.information. Unos pocos píxeles son suficientes para garantizar que el div.popup pueda recibir el desplazamiento al mover el cursor fuera de la información div.

Esto no funciona como se esperaba con Internet Explorer 10.0.9200 y funciona como se espera con Opera 12.16, Firefox 18.0 y Google Chrome 28.0.15.

Consulte fiddle http://jsfiddle.net/F68Le/ para ver un ejemplo completo con un menú emergente multinivel.

por favor prueba este código

<!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 +permiten 'seleccionar' sólo el primer elemento no anidada, los >únicos elementos anidados seleccione - el mejor es usar ~que permiten seleccionar elemento arbitrario que es hijo de padres revoloteaban elemento. Usando opacidad / ancho y transición puede proporcionar una apariencia suave

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>

Para mí, si quiero interactuar con el div oculto sin verlo desaparecer cada vez que dejo el elemento desencadenante (a en ese caso) debo agregar:

div:hover {
    display: block;
}

Basado en la respuesta principal, este es un ejemplo, útil para mostrar información sobre herramientas de información al hacer clic en ?un enlace cercano:

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>

De mis pruebas usando este CSS:

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

Y este HTML:

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

, resultó que se expande usando el segundo, pero no se expande usando el primero. Entonces, si hay un div entre el objetivo de desplazamiento y el div oculto, entonces no funcionará.

HTML

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

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen: coloca el cursor sobre el texto del show div en otro div

No lo olvides Si intenta desplazarse alrededor de una imagen, debe colocarla alrededor de un contenedor. css:

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

.brand-sales {
    display: none;
}

Si te desplazas sobre esto:

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

Esto mostrará:

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