Usando solo CSS, muestre div en el control deslizante sobre

Me gustaría mostrar un div cuando alguien sobre un elemento , pero me gustaría hacer esto 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; } 
 Hover over me! 
Stuff shown on hover
 .showme{ display: none; } .showhim:hover .showme{ display : block; } 
 
HOVER ME
hai

Descubrí que el uso de la opacidad es mejor, te permite agregar transiciones css3 para crear un buen efecto de saludo final. Las transiciones simplemente se eliminarán 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; } 
 
Hover
stuff

Estoy de acuerdo significa un experto, pero estoy muy orgulloso de mí mismo por haber solucionado algo acerca de este código. Si lo haces:

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

(Observe el ‘>’). Puede contener todo el asunto en una etiqueta a, siempre y cuando su activador (que puede estar en su propia div, o directamente en la etiqueta a, o cualquier cosa que desee) toque físicamente. Div revelado, puede mover su mouse de uno a otro.

Tal vez esto no sirva para mucho, pero tuve que configurar mi div revelado para desbordar: automático, por lo que a veces tenía barras de desplazamiento, que no podían usarse tan pronto como te alejas del div.

De hecho, después de finalmente resolver cómo hacer que el div revelado, (aunque ahora es un elemento secundario del gatillo, no un hermano), se sienta 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 principal aparezca sobre el elemento secundario ) ni siquiera tiene que pasar el divisor revelado para desplazarse, simplemente manténgase sobre el activador y use la rueda, o lo que sea.

Mi div revelado abarca 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 realmente orgulloso de mí mismo.

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

Me gustaría ofrecer esta solución de plantilla de propósito general que amplía la solución correcta proporcionada por Yi Jiang.

Los beneficios adicionales incluyen:

  • soporte para pasar el mouse sobre cualquier tipo de elemento, o múltiples elementos;
  • la ventana emergente puede ser cualquier tipo de elemento o conjunto de elementos, incluidos los objetos;
  • código de auto-documentación;
  • asegura que la ventana emergente aparece sobre los otros elementos;
  • una buena base para seguir si está generando código html desde una base de datos.

En el html, coloca la siguiente estructura:

 

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. Como la posición de div.popup se establece en fixed (también funcionaría con absolute), el contenido no se encuentra dentro del flujo normal del documento, lo que permite que el atributo visible funcione bien.
  2. z-index está configurado para garantizar que div.popup aparezca encima de los otros elementos de la página.
  3. El information_popup_container se establece en un tamaño pequeño y, por lo tanto, no se puede sobrevolar.
  4. Este código solo permite pasar el cursor sobre el elemento div.information. Para apoyar al pasar el cursor 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.

Coloca el cursor sobre la ventana emergente

Como información adicional. Cuando la ventana emergente contenga información que tal vez quiera cortar y pegar, o que contenga 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 haya una superposición con div.information. Unos pocos píxeles son suficientes para garantizar que div.popup pueda recibir el vuelo estacionario al mover el cursor fuera de div.information.

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

Ver fiddle http://jsfiddle.net/F68Le/ para un ejemplo completo con un menú emergente de varios niveles.

Esta respuesta no requiere que conozca el tipo de pantalla (en línea, etc.) que se supone que es el elemento oculto cuando se muestra:

 .hoverable:not(:hover) + .show-on-hover { display: none; } 
 Hover over me! 
I'm a block element.

Hover over me also! I'm an inline element.

por favor prueba este código

       Hover over me! 
the color is changing now

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

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

 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; } 
 Delete all obsolete informations? 
All data older than 2 weeks will be deleted.

HTML

 

Show content

Hello World

CSS

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

CodePen: coloca el cursor sobre el texto de mostrar div en otro div

De mi prueba usando este CSS:

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

Y este HTML:

 
expand
expand

, resultó que se expande usando el segundo, pero no se expande usando el primero. Entonces, si hay una div entre el objective de desplazamiento y la div oculta, entonces no funcionará.