3

Tengo un botón al que le tengo asociado el evento onMouseOut

      <button id="boton"  onMouseOut={hago algo}

      </button>

¿Existe alguna manera de detectar cuando me salgo del botón por la derecha con onMouseOut o cuando me salgo del botón por la izquierda con onMouseOut? En otras palabras: al posicionarme con el mouse sobre mi botón y luego mover al mouse a mi derecha, ¿existe alguna forma de que onMouseOut me diga que me salí por mi derecha? o al posicionarme con el mouse sobre mi botón y luego mover al mouse a mi izquierda, ¿existe alguna forma de que onMouseOut me diga que me salí por mi izquierda?

introducir la descripción de la imagen aquí

Siendo más específico en mi pregunta, lo que deseo hacer es lo siguiente:

  1. Al posicionarme sobre el botón menos(-) aparezca visible el cuadro negro (el que contiene el zoom y el texto Mostrar el control deslizante 1).
  2. Al posicionarme sobre el botón menos(-) y desplazar el mouse hacia la izquierda sobre el cuadro negro se siga manteniendo el cuadro negro visible.
  3. AL sacar el mouse de este cuadro negro desaparezca este cuadro negro.
  4. Al posicionarme sobre el botón menos(-) y aparecer el cuadro negro luego al sacar el mouse fuera del botón menos(-) desaparezca el cuadro negro (aquí es importante acotar que necesito que al estar posicionado sobre el botón menos(-) y moverlo hacia mi mano derecha el cuadro negro debe desaparecer, pero si estoy sobre el botón menos(-) y me muevo hacia mi mano izquierda y estoy sobre el cuadro negro este no quiero que desaparezca).

No me ha sido fácil lograr el punto 4, pero los cuatro puntos indican lo que deseo lograr.

Acá parte del código:

const mostrarMensajeControlDeslizante = (e) =>{  

      document.getElementById("mensaje_resta").style="visibility: `visible;"
      document.getElementById("triangulo_resta").style="visibility: visible;" 
      document.getElementById("p").style="visibility: visible;"
      document.getElementById("a").style="visibility: visible;" 

}

const ocultarMensajeControlDeslizante1 = (e) =>{

      document.getElementById("mensaje_resta").style="visibility: `visible;"
      document.getElementById("triangulo_resta").style="visibility: visible;" 
      document.getElementById("p").style="visibility: visible;"
      document.getElementById("a").style="visibility: visible;" 

}

return(
         {BOTON RESTA}
          <button id="btn-resta"  
              onMouseOver={mostrarMensajeControlDeslizante} 
              onMouseOut={ocultarMensajeControlDeslizante}
              >
                <i id="fa-minus" className="fas fa-minus"></i>
          </button>


          {ESTE ES EL RECUADRO NEGRO}
         
            <div  id="mensaje_resta"  >      
                <p id="p">Zoom</p>
                <a id="a" >Mostrar el control deslizante 1</a>
            </div>
            <div id="triangulo_resta"  
              >               
            </div> 
)       
11
  • 5
    Necesitarás capturar la posición del cursor a través de la propiedad clientX y en cada movimiento (evento mousemove) almacenar la posición del cursor, de tal manera que cuando se produzca el evento de salida solo necesites comparar la nueva posición con la anterior. Si es mayor, se fue por la derecha, y si es menor, por la izquierda.
    – user255960
    Commented el 19 nov. 2021 a las 4:18
  • 1
    Será necesario que muestres tu intento en código o los policías de StackOverflow van a aparecerse por aquí.
    – user255960
    Commented el 19 nov. 2021 a las 12:56
  • 1
    he intentado todo lo que me aconsejan pero ha sido infructuoso, no he logrado el objetivo, hacer esto no es nada facil.......
    – luis silva
    Commented el 19 nov. 2021 a las 15:48
  • 1
    @Alexis88, tu comentario es muy bueno, ¿por qué no creas la respuesta?
    – Triby
    Commented el 19 nov. 2021 a las 16:57
  • 1
    @Alexis88 ¡Lo mismo digo!
    – Triby
    Commented el 19 nov. 2021 a las 17:00

1 respuesta 1

2

He pensado en una mejor solución que la de mi comentario. Solo hace falta lo siguiente:

En el momento en el que se produzca el evento de salida en el elemento, captura la posición del cursor y compáralo con los bordes izquierdo y derecho los cuales puedes obtener por medio del método getBoundingClientRect(). El resto es lo mismo: si la posición es menor al borde izquierdo, el cursor se fue por la izquierda; y si es mayor al borde derecho, se fue por la derecha.

Como no tengo un ordenador a la mano, adjunto una imagen con el código de ejemplo (intenté escribirlo, pero no me deja publicarlo). Trata de adaptarlo a tus necesidades. Si algo va mal, me avisas.

introducir la descripción de la imagen aquí

6
  • Corrección: El cálculo de los bordes se puede hacer por fuera de esa función dado que no va a variar.
    – user255960
    Commented el 19 nov. 2021 a las 22:58
  • Muchas gracias Alexis88 por tu intencion de ayudarme, buena logica, al final logre hacerlo con solo onMouseOver y onMouseOut...Gracias tambien a los otros compañeros por sus contribuciones.
    – luis silva
    Commented el 20 nov. 2021 a las 1:55
  • Buena respuesta, pero en SO se pide que el código se publique como texto y no como imagen.
    – Triby
    Commented el 20 nov. 2021 a las 6:36
  • @Triby No se me ha permitido publicar el código (lo indiqué en la descripción). Estoy únicamente con un teléfono móvil por estos días, y cuando he escrito el código en intentado publicarlo, se me indicó que debía darle formato, pero en la vista para móviles no se encuentran las herramientas de formato; y forzando la vista de escritorio en el móvil, por un tema de espacio físico no se podía pulsar los botones de las herramientas de formato. Solo me quedó escribir el código en un IDE para móviles, tomar una captura y subirla.
    – user255960
    Commented el 20 nov. 2021 a las 13:30
  • 1
    @Triby Desde un inicio lo intenté así pensando añadir un texto extra pidiendo que se formatee el código, pero directamente se mostró un mensaje en letras rojas advirtiendo que no podía añadir el código debido a la falta de formato. De hecho, al intentar publicarlo, se me indicaba que debía resolver ese problema. Por eso es que no me quedó otra opción que adjuntar esa imagen.
    – user255960
    Commented el 21 nov. 2021 a las 5:41

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.