<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
// se ejecuta el evento hover al pasar el mouse por encima
$(".selector").hover(function(){
// cogemos el id del li por el que estamos pasando por encima
var id=$(this).attr("id");
// mostramos el div que tiene una clase que se llama como el id
$("."+id).show();
},function(){
// esta función se ejecuta cuando pierde el foco
var id=$(this).attr("id");
$("."+id).hide();
})
});
</script>
<style>
.primero,.segundo {
display:none;
padding:5px;
border:1px solid #ccc;
background-color:#f1f1f1;
width:200px;
}
</style>
</head>
<body>
<ul>
<li class='selector' id="primero">mostrar el primer div oculto</li>
<li class='selector' id="segundo">mostrar el segundo div oculto</li>
</ul>
<div class="primero">Contenido del primer div</div>
<div class="segundo">Contenido del segundo div</div>
</body>
</html>
Comentarios sobre la versión: Versión 1 (0)
No hay comentarios