-2

Al detectar el cursor sobre el botón se mueva a una posición aleatoria, he buscado por todas partes y no he encontrado algo que me guíe:"(

1
  • Por favor lee Cómo preguntar, edita y agrega lo que lleves
    – user128299
    Commented el 26 jul. 2020 a las 15:35

1 respuesta 1

3

Así lo haría con JQuery.

Debes de poner un contenedor (div) con posición relativa y el (button) que está adentro con posición absoluta.

Luego con JQuery le cambias el top y el left al (button) cuando hay un hover al (button)

Código:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Boton</title>
  <style>
    .relativeContainer {
      position: relative;
      width: 800px;
      height: 500px;
      background-color: aquamarine;
    }

    #botonQueSeMueve {
      position: absolute;
      top: 80px;
      left: 30px;
    }
  </style>
</head>

<body>
  <div class="relativeContainer">
    <button id="botonQueSeMueve">
      Presióname
    </button>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script>
    $("#botonQueSeMueve").hover(function () {
      $("#botonQueSeMueve").css("top", `${Math.random() * 500}px`);
      $("#botonQueSeMueve").css("left", `${Math.random() * 800}px`);
    });
  </script>
</body>

</html>

Math.random() devuelve un valor random de 0 a 1, en el top lo multipliqué por 500 ya que ese es el height del contenedor, así va a devolver un valor entre 0 y 500. Lo mismo para el left pero con 800...

Estas comillas son para meter variables dentro de un string:

`${variable}px`
1
  • Me funciona muy bien, ¡gracias crack.!
    – Luis
    Commented el 26 jul. 2020 a las 15:57

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