javascript - onmouse - mouse over div
¿Cómo mostrar divs ocultos en mouseover? (5)
¿Cómo mostrar un conjunto de div ocultos onmouseover?
Por ejemplo :
<div id="div1">Div 1 Content</div>
<div id="div2">Div 2 Content</div>
<div id="div3">Div 3 Content</div>
Todos los div deben ser mostrados en el evento.
Hay una forma realmente simple de hacer esto de una manera única de CSS.
Aplique una opacidad a 0, por lo que la hace invisible, pero seguirá reaccionando a los eventos de JavaScript y los selectores de CSS. En el selector de desplazamiento, haga que sea visible cambiando el valor de opacidad.
#mouse_over {
opacity: 0;
}
#mouse_over:hover {
opacity: 1;
}
<div style=''border: 5px solid black; width: 120px; font-family: sans-serif''>
<div style=''height: 20px; width: 120px; background-color: cyan;'' id=''mouse_over''>Now you see me</div>
</div>
Pase el mouse sobre el contenedor y pase sobre los divs. Lo uso para los menús de jQuery DropDown principalmente:
¡Copie todo el documento y cree un archivo .html que podrá descubrir por su cuenta a partir de eso!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Divs Case</title>
<style type="text/css">
* {margin:0px auto;
padding:0px;}
.container {width:800px;
height:600px;
background:#FFC;
border:solid #F3F3F3 1px;}
.div01 {float:right;
background:#000;
height:200px;
width:200px;
display:none;}
.div02 {float:right;
background:#FF0;
height:150px;
width:150px;
display:none;}
.div03 {float:right;
background:#FFF;
height:100px;
width:100px;
display:none;}
div.container:hover div.div01 {display:block;}
div.container div.div01:hover div.div02 {display:block;}
div.container div.div01 div.div02:hover div.div03 {display:block;}
</style>
</head>
<body>
<div class="container">
<div class="div01">
<div class="div02">
<div class="div03">
</div>
</div>
</div>
</div>
</body>
</html>
Puede envolver el div oculto en otro div que alternará la visibilidad con los controladores de eventos onMouseOver y onMouseOut en JavaScript:
<style type="text/css">
#div1, #div2, #div3 {
visibility: hidden;
}
</style>
<script>
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
</script>
<div onMouseOver="show(''div1'')" onMouseOut="hide(''div1'')">
<div id="div1">Div 1 Content</div>
</div>
<div onMouseOver="show(''div2'')" onMouseOut="hide(''div2'')">
<div id="div2">Div 2 Content</div>
</div>
<div onMouseOver="show(''div3'')" onMouseOut="hide(''div3'')">
<div id="div3">Div 3 Content</div>
</div>
Si los divs están ocultos, nunca activarán el evento mouseover .
Tendrá que escuchar el evento de algún otro elemento oculto.
Puede considerar envolver sus divs ocultos en divisores de contenedor que permanecen visibles, y luego actuar sobre el evento de mouseover de estos contenedores.
<div style="width: 80px; height: 20px; background-color: red;"
onmouseover="document.getElementById(''div1'').style.display = ''block'';">
<div id="div1" style="display: none;">Text</div>
</div>
También puedes escuchar el evento mouseout si quieres que el div desaparezca cuando el mouse abandone el contenedor div:
onmouseout="document.getElementById(''div1'').style.display = ''none'';"
Opción 1 Cada div se identifica específicamente, por lo que cualquier otro div (sin los ID específicos) en la página no obedecerá la pseudo-clase: hover.
<style type="text/css">
#div1, #div2, #div3{
display:none;
}
#div1:hover, #div2:hover, #div3:hover{
display:block;
}
</style>
Opción 2 Todos los divs en la página, independientemente de las ID, tienen el efecto de desplazamiento.
<style type="text/css">
div{
display:none;
}
div:hover{
display:block;
}
</style>