es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • El “hover” no reacciona de manera precisa al puntero mientras se trabaja en un botón dentro de una cuadrícula.

El “hover” no reacciona de manera precisa al puntero mientras se trabaja en un botón dentro de una cuadrícula.

12 Jul, 2023 Programación

Estoy trabajando en botones y luego tengo algunos errores con el hover. Hay 3 problemas con mi código.

En esta imagen, mi puntero está en el botón del 20%, pero también parece que el botón del 5% se activa al pasar el puntero sobre él.

A continuación, mi puntero estaba en “Select Tip %”, pero todavía parece que el 5% se activa al pasar el puntero sobre él.
En la última imagen, el hover no funciona en el botón Reset.

Aquí está mi código:

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.options {
  display: grid;
  grid-template-columns: repeat(2, 177.5px);
  gap: 20px;
}

.options button {
  border: 0;
  border-radius: 5px;
  background-color: hsl(183, 100%, 15%);
  color: hsl(189, 41%, 97%);
}

.result-section .reset {
  border: none;
  width: 100%;
  text-align: center;
  background-color: hsl(172, 67%, 45%);
  border-radius: 5px;
  font-weight: 700;
  color: hsl(183, 100%, 15%);
  height: 50px;
  opacity: 0.3;
}

button:hover {
  background-color: hsl(185, 41%, 84%);
}

<!-- language: lang-html -->
<label class="selections">
  <p>Select Tip %</p>
  <div class="options">
    <button class="a" href="">5%</button>
    <button class="a" href="">10%</button>
    <button class="a" href="">15%</button>
    <button class="a" href="">20%</button>
    <button class="a" href="">25%</button>
    <input class="custom" type="number" placeholder="Custom">
  </div>
</label>
<div class="items item-3">
  <button class="reset" href="">Reset</button>
</div>

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Hay tres problemas con el código proporcionado:

    1. El selector button:hover no tiene un selector de clase o id, lo que significa que aplicará el efecto de hover a todos los botones en la página. Es por eso que el botón del 5% se activa cuando el puntero está en 20%.

    Para solucionar esto, agrega un selector de clase o id a button:hover. Por ejemplo:

    .options button:hover {
  background-color: hsl(185, 41%, 84%);
}

    Esto solo aplicará el efecto de hover a los botones dentro del contenedor .options.

    1. El botón del 5% se activa cuando se activa la etiqueta “Select Tip %” porque la etiqueta está posicionada encima de los botones e interfiere con el evento de hover.

    Para solucionar esto, puedes agregar una propiedad z-index a la etiqueta para hacer que aparezca debajo de los botones:

    .selections {
  position: relative;
  z-index: 1;
}

    Esto hará que la etiqueta aparezca por encima de los botones, pero aún debajo del campo de entrada de texto.

    1. El botón “Reset” no recibe el efecto de hover porque el selector button:hover no se aplica a él. Esto se debe a que el selector solo afecta a los botones dentro del contenedor .options.

    Para solucionar esto, puedes agregar un selector separado para el botón “Reset”:

    .reset:hover {
  background-color: hsl(160, 40%, 60%);
}

    Esto aplicará el efecto de hover al botón “Reset” cuando se le haga hover.

    Con estos cambios, el código debería funcionar como se espera.

Comments are closed.