Teniendo este código:
$('.container').hover(hoverIn, hoverOut);
function hoverIn (){
console.log('hover dentro');
}
function hoverOut (){
console.log('hover fuera');
}
html, body, .container {
width : 100%;
height : 100%;
margin : 0px;
}
.container {
background : #ffbb00;
}
.element {
position : absolute;
z-index : 1;
top : 0.5em;
left : 0.5em;
width : 100px;
height : 100px;
background : white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
<div class="element"></div>
Al pasar el ratón por encima del elemento de clase .element
, la función hover
de jQuery
ejecuta el segundo callback (El puntero ha salido fuera de los límites de el elemento .container
)
¿Cómo evitar que detecte el elemento .element
al hacer hover
?