Estoy investigando para realizar un efecto hover con JQuery, y encontré el código que está mas abajo. Ahora bien, cuando paso el mouse para el efecto lo que hace es "tapar" al div con z-index: 1; y lo que quiero yo es que aparezca como una transparencia por encima de z-index:1; (es decir que aparezca un div por encima, pero que deje ver lo que se encuentra debajo)... es posible? Estoy tratando de usar el código correcto?
Otro problema es que si paso el mouse muy rápido, el DIV que "aparece" se queda colgado...
Desde ya muchas gracias a todos
Código:
<!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>
<script src="http://code.jquery.com/jquery-1.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// Por cada div con la clase "pasar_raton" se muestra un div encima
$('div[class="pasar_raton"]').each(function() {
$(this).hover(function(){
$(this).css("display","none");
$(this).siblings("div").fadeIn("slow",function(){
$(this).hover(function(){},function(){
$(this).css("display","none");
$(this).siblings("div").css("display","block");
});
});
});
});
});
</script>
<style>
body {
margin: 20px;
font-family: arial;
font-size: 12px;
margin: 0 5%;
}
.pasar_raton {
float: left;
margin: 15px;
width: 150px;
padding: 10px;
border: 1px solid;
height: 100px;
}
.div_a_mostrar {
position: relative;
z-index: 500;
display: none;
float: left;
margin: 15px;
width: 150px;
padding: 10px;
border: 1px solid;
height: 100px;
}
</style>
</head>
<body>
<div>
<div class="pasar_raton">
Pasa el raton por encima.
</div>
<div class="div_a_mostrar">
<div><br />
<br />
Este es el div que se muestra al pasar el raton por encima mostrando el anterior contenido más informacion adicional
</div>
</div>
</div>
<div>
<div class="pasar_raton">
Pasa el raton por encima.
</div>
<div class="div_a_mostrar">
<div><br />
<br />
Este es el div que se muestra al pasar el raton por encima mostrando el anterior contenido más informacion adicional
</div>
</div>
</div>
</body>
</html>