2

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?

1 respuesta 1

2

Utiliza la propiedad CSS pointer-events : none. Cuando esta propiedad está en none, indica que este elemento no va a ser parte de los eventos de ratón.

$('.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;
  pointer-events : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
<div class="element"></div>

3
  • Otra característica no muy clara en el post es que pointer-events: none es que también sirve para elementos que están detrás de otros, no solo al frente. Algo que puede ser muy útil en interfaces de usuario complicadas donde hay muchos overlayers. Commented el 21 sept. 2016 a las 23:31
  • 1
    Feedback: si fuera mi respuesta, me enfocaria en que hace pointer-events: none y algunos detalles, simplificaria el ejemplo y lo presentaria cerrado pues distrae la vista hacia el ejemplo y se tarda mas tiempo en entender de que se trata la solucion, que por cierto es la unica que anda bien. +1, es util para futuros lectores. Commented el 21 sept. 2016 a las 23:33
  • @rnd Tienes razón. Cuando tenga tiempo investigaré un poco. Recién acabo de descubrir la propiedad pinter-events. Si quieres puedes escribir una respuesta, y la marcaré como aceptada. Es por eso que aún no he aceptado la mía. XD Por cierto habría alguna solución para hacer el elemento .element clicable y que siga manteniendo el mismo comportamiento con el hover? Saludos! =) Commented el 22 sept. 2016 a las 13:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.