por - Usando solo CSS, muestre div al pasar el cursor sobre<a>
mostrar texto al pasar el mouse jquery (11)
Me gustaría mostrar un div cuando alguien se cierne sobre un elemento <a> , pero me gustaría hacer esto en CSS y no en JavaScript. ¿Sabes cómo se puede lograr esto?
Basado en 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; }
<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>
, el resultado es que se expande utilizando el segundo, pero no se expande utilizando el primero. Entonces, si hay un div entre el objetivo flotante y el div oculto, entonces no funcionará.
Descubrí que usar la opacidad es mejor, te permite agregar transiciones css3 para lograr un buen efecto de css3 finalizado. Las transiciones solo serán eliminadas por los navegadores IE más antiguos, por lo que se degradan 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>
Esta respuesta no requiere que sepa qué tipo de pantalla (en línea, etc.) se supone que debe ser el elemento oculto 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 utiliza el selector de hermanos adyacente y el selector no .
HTML
<div>
<h4>Show content</h4>
</div>
<div>
<p>Hello World</p>
</div>
CSS
div+div {
display: none;
}
div:hover +div {
display: block;
}
Me gustaría ofrecer esta solución de plantilla de propósito general que se expande en la solución correcta proporcionada por Yi Jiang.
Los beneficios adicionales incluyen:
- soporte para desplazarse 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 aparezca sobre los otros elementos;
- una base sólida para 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 colocas 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:
- Debido a que la posición de div.popup se establece en fija (también funcionaría con absoluto), el contenido no está dentro del flujo normal del documento, lo que permite que el atributo visible funcione bien.
- z-index se establece para garantizar que el div.popup aparezca sobre los otros elementos de la página.
- El information_popup_container se establece en un tamaño pequeño y, por lo tanto, no se puede desplazar.
- Este código solo admite pasar sobre el elemento div.information. Para admitir el desplazamiento del mouse sobre la información div.información y el div.popup, vea Hover Over The Popup a continuación.
- Ha sido probado y funciona como se espera en Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 y Google Chrome 28.0.15.
Sobre el popup
Como información adicional. Cuando la ventana emergente contenga información que tal vez desee cortar y pegar o contenga un objeto con el que quiera 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 el div.popup pueda recibir el desplazamiento al mover el cusor fuera de div.información.
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.
Consulte fiddle http://jsfiddle.net/F68Le/ para ver un ejemplo completo con un menú emergente de varios niveles.
Para mí, si quiero interactuar con el div oculto sin verlo desaparecer cada vez que abandono el elemento activador (a en ese caso), debo agregar:
div:hover {
display: block;
}
Por lo que entiendo se entiende un experto, pero estoy increíblemente orgulloso de mí mismo por haber trabajado en 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) esté físicamente tocando El div revelado, puede mover su ratón de uno a otro.
Tal vez esto no sea útil para muchas cosas, 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 alejas del div.
De hecho, después de finalmente averiguar cómo hacer que el div revelado, (aunque ahora es un hijo del activador, no un hermano), siéntese detrás del activador, en términos del índice z, (con un poco de ayuda de esta página : Cómo hacer que un elemento primario aparezca por encima del secundario ), ni siquiera tiene que desplazarse sobre el div revelado para desplazarlo, 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 la 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 lo tanto, estoy realmente orgulloso de mí mismo.
El único inconveniente es que no puedes poner enlaces dentro de todo, pero puedes usar todo como un enlace grande.
Puedes hacer algo como this :
div {
display: none;
}
a:hover + div {
display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
Utiliza el selector de hermanos adyacente 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 elemento div se puede convertir en un elemento secundario del ancla. De lo contrario, el principio es el mismo: use la pseudo-clase :hover para cambiar la propiedad de display de otro elemento.
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>
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
<div class="showhim">HOVER ME<div class="showme">hai</div></div>
Dado que esta respuesta es popular, creo que se necesita una pequeña explicación. Usando este método cuando se desplaza sobre el elemento interno, no desaparecerá. Debido a que .showme está dentro .showhim no desaparecerá cuando mueva el mouse entre las dos líneas de texto (o lo que sea).
Estos son ejemplos de requisitos que debe tener en cuenta al implementar dicho comportamiento.
Todo depende para lo que necesites. Este método es mejor para un escenario de estilo de menú, mientras que Yi Jiang es mejor para información sobre herramientas.