Les explico lo que quiero hacer es un hovercard es decir un box que se abre cuando paso el mause por en sima de algun class.
Esto lo he hecho pero tengo un problema y es que no funciona correctamente.
El funciona asi, cuando yo poso el puntero sobre alguna etiqueta con la class .hovercard crea paralelamente un div con el class hovercard-box que aparece justo debajo, arriba o al costado depende de la posicion de la etiqueta.
Todo esto lo hace bien.
Luego de aparecer tiene que desaparecer cuando yo quite el puntero de arriba del div creado con la class hovercard-box, pero no lo hace.
Mi razonamiento me dice que es porque el div hovercard-box no estaba cuando se cargo todo el javascript por lo tanto no reacciona.
El código es:
Código:
Si ejecutan ese código en el navegador verán que funciona pero no desaparece.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
.hovercard-box {
z-index: 9999;
position: absolute;
padding:20px 5px 5px 5px;
width:300px;
height: 150px;
}
.hovercard-box .box {
border:1px solid #aaa;
border-radius: 3px;
background-color: #fff;
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 4px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 4px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 4px;
}
</style>
<script type="text/javascript">
$(function() {
$(".hovercard").on('mouseenter', function() {
var position = $( this ).position();
var position2 = $( this ).offset();
var top = (($( this ).offset().top * 100) / $( document ).height());
var left = (($( this ).offset().left * 100) / $( document ).width());
if(left >= 75){
pqLeft = (position.left-250);
}else{
pqLeft = position.left;
}
if(top >= 60){
pqTop = (position.top-175);
}else{
pqTop = position.top;
}
if($( this ).siblings('.hovercard-box').length){
$( this ).siblings('.hovercard-box').show().css('top', (pqTop)).css('left', pqLeft);
}else{
$( this ).parent().append('<div class="hovercard-box"><div class="box">Hola</div></div>');
$( this ).siblings('.hovercard-box').show().css('top', (pqTop)).css('left', pqLeft);
}
});
$(".hovercard-box").on('mouseenter', function(e) {
return false;
e.stopPropagation();
});
$(".hovercard-box").on('mouseout', function() {
$('.hovercard-box').hide();
});
});
</script>
</head>
<body>
<h2><a class="hovercard" data-uid="1" href="#">hover card</a>
</h2>
</body>
</html>
Espero se pueda solucionar. muchas gracias de antemano.
