0

tengo 2 botones, el botón de "Si" y el botón de "No", cada vez que el usuario pasa el mouse por el botón de "No" este cambia de posición, de igual manera cuando es en móvil. El problema es que para que el botón pueda teletransportarse en toda la pantalla, le puse "position-fixed" en la clase pero al hacer este cambio hace que los botones colisionen en la versión web. Agradecería mucho su opinión compañeros, muchas gracias de antemano!

Por último si tuvieran una idea para que la imagen no se achique tanto en la versión móvil también me ayudaría mucho

Esta es la versión de escritorio

Esta es la versión móvil

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pregunta</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <style>
        body{
            background-color: beige;
        }
    </style>
</head>
<body class="row align-items-center vh-100 text-center">

    <div class="container-fluid">
        
        <div class="pregunta">
            <!-- Aquí abajo puedes cambiar la pregunta -->
            <h1 class="fw-bold">Quieres ser mi novia?❤</h1>
        </div>

        <div class="foto">
            <!-- Aquí puedes cambiar la imagen -->
            <img src="imagen.jpg" class="rounded w-25 p-2" alt="Fotito">
        </div>
        
        <div class="respuestas">
            <!-- Aquí puedes cambiar las respuestas -->
           
            <a style="width: 4rem; left: 40%;"class="btn btn-primary btn-lg fw-bold position-fixed" id="negativo" href="#" role="button">No</a>
            <a style="width: 4rem; right:40%;"class="btn btn-primary btn-lg fw-bold position-fixed" id="positivo" href="#" role="button">Si</a>
        </div>

        
    </div>    
    
    <!-- Aquí está el funcionamiento para que cuando presionas la opción de "No" se mueva el botón y cuando presiones el botón de "Si" aparezca una alerta -->
    <script >
        let respuestaSi=document.getElementById('positivo')
        respuestaSi.addEventListener("click",function(e){
            alert("Sabía que dirías que si ❤");
        })
        let respuestaNo=document.getElementById('negativo')
        respuestaNo.addEventListener("mousemove",function(e){
            let x = Math.round(Math.random()*93);
            let y = Math.round(Math.random()*93);
            respuestaNo.style.left = x+"%";
            respuestaNo.style.top = y+"%";
})
    </script> 
</body>
</html>
4
  • Estas usando bootstrap? Qué versión? Por qué no usas una hoja de estilo CSS? Sería más fácil y más presentable. Además con envolver los botones en un div sería una solución Commented el 9 jun. 2021 a las 23:08
  • Si, estoy usando Bootstrap, no uso una hoja de estilos porque mi idea era hacerlo todo con bootstrap para practicarlo y ver si hay una solución para eso con bootstrap Commented el 9 jun. 2021 a las 23:16
  • Los estilos y esos, si se puede. Estoy viendo con bootstrap 5 que puedo hacer Commented el 9 jun. 2021 a las 23:21
  • ¿Responde esto a tu pregunta? Mover botón con bootsrap Commented el 10 jun. 2021 a las 0:40

1 respuesta 1

0

Muy buena la págna :).
El uso de las clases de Bootstrap tiene sus misterios ¿verdad?
Yo he visto esta solución a ver que te parece

A la foto le he quitado la clase w-25 (la reducía a un 25%). También puedes ponerle un tamaño mínimo con un style="min-width:nnpx" nn es el número que necesites. He añadido las clases row row-cols-2 al bloque con class respuestas, que contiene a los botones.
He quitado los atributos width y height de los estilos aplicados a los botones SI NO
He quitado la clase position-fixed a los botones SI NO.
He metido los botones SI NO dentro dentro de bloques div con clase col

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pregunta</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <style>
        body{
            background-color: beige;
        }
    </style>
</head>
<body class="row align-items-center vh-100 text-center">

    <div class="container-fluid" style="width: fit-content">
        
        <div class="pregunta">
            <!-- Aquí abajo puedes cambiar la pregunta -->
            <h1 class="fw-bold">Quieres ser mi novia?❤</h1>
        </div>

        <div class="foto">
            <!-- Aquí puedes cambiar la imagen -->
            
            <img src="../images/card-img.png" class="rounded p-2  " alt="Fotito">
        </div>
        
        <div class="respuestas row row-cols-2">
            <!-- Aquí puedes cambiar las respuestas -->
           <div class="col">
            <a style="width: 4rem; left: 40%;" class="btn btn-primary btn-lg fw-bold" id="negativo" href="#" role="button">No</a>
            </div>
            <div class="col">
            <a style="width: 4rem; right:40%;" class="btn btn-primary btn-lg fw-bold" id="positivo" href="#" role="button">Si</a>
            </div>
        </div>

        
    </div>    
    
    <!-- Aquí está el funcionamiento para que cuando presionas la opción de "No" se mueva el botón y cuando presiones el botón de "Si" aparezca una alerta -->
    <script >
        let respuestaSi=document.getElementById('positivo')
        respuestaSi.addEventListener("click",function(e){
            alert("Sabía que dirías que si ❤");
        })
        let respuestaNo=document.getElementById('negativo')
        respuestaNo.addEventListener("mousemove",function(e){
            let x = Math.round(Math.random()*93);
            let y = Math.round(Math.random()*93);
            respuestaNo.style.left = x+"%";
            respuestaNo.style.top = y+"%";
})
    </script> 
</body>
</html>

En la prueba que he hecho funciona. Al final me hice novio del gatito!!!

5
  • Holaaa apliqué los cambios que mencionaste pero si quito la clase position-fixed en el botón, este ya no se mueve y cambia de lugar al pasar el mouse por el como lo implementé con JavaScript :( Commented el 13 jun. 2021 a las 1:34
  • Cierto, algo falló en mi prueda. He editado la respuesta. Pero es fácil: vuelve a poner el botón fixed.
    – Juan
    Commented el 14 jun. 2021 a las 9:26
  • @Juan no eres el autor de la respuesta, mejor deja un comentario para que el autor original haga los cambios
    – Christian
    Commented el 14 jun. 2021 a las 17:13
  • Perdón, pero al recibir el comentario contesté sin mirar el "detalle" del autor. Lo siento.
    – Juan
    Commented el 14 jun. 2021 a las 17:19
  • Alguien se coló, sin problema. Se ve que el intruso sabe como va el problema y cierto es necesario poner el estilo position.fixed (o absolute) para que se mueva. Pruébalo y verás que va bien.
    – JuanCar
    Commented el 14 jun. 2021 a las 21:27

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.