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 respuesta
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`