2

Haciendo una calculadora, quiero que cuando el cursor pase por las teclas el background se ponga verde, y cuando se clicke en las teclas el fondo se ponga de un verde diferente. Para el :hover he usado css, para el click he (probado) a usar jQuery:

$(document).ready(function(){
    $(".calc").click(function(){
        $(this).css("background-color", "#197647");
      });
      
      // añado mouseleave para que vuelva al color original para que no se quede el color #197647 guardado después de hacer click:

      $(".calc").mouseleave(function(){
        $(this).css("background-color", "#4A5759");
      });
    
  });
.calc:hover{
    background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="calculadora">
        <div class="divinput">
            <input type="text" name="" id="">
        </div>
        <div class="container">
            <div class="calc">%</div>
            <div class="calc">√</div>
            <div class="calc">n²</div>
            <div class="calc">1⁄x</div>
            <div class="calc">CE</div>
            <div class="calc">C</div>
            <div class="calc">DEL</div>
            <div class="calc">÷</div>
            <div class="calc">7</div>
            <div class="calc">8</div>
            <div class="calc">9</div>
            <div class="calc">X</div>
            <div class="calc">4</div>
            <div class="calc">5</div>
            <div class="calc">6</div>
            <div class="calc">-</div>
            <div class="calc">1</div>
            <div class="calc">2</div>
            <div class="calc">3</div>
            <div class="calc">+</div>
            <div class="calc">±</div>
            <div class="calc">0</div>
            <div class="calc">,</div>
            <div class="calc">=</div>
        </div>
</div>

Lo de jQuery funciona bien pero sin embargo el :hover de css ya no funciona o lo hace impredeciblemente.

He probado a hacer el hover también en jQuery

$(".calc").hover(function(){
        $(this).css("background-color", "green");
      },

Pero entonces el click es el que no funciona.

1
  • Hola Javier, la función hover de jquery la tienes igual en el código? esta mal cerrada, te falta ); y te sobra la coma el 19 mar. 2019 a las 11:30

1 respuesta 1

3

$(document).ready(function(){
    $(".calc").click(function(){
        $(this).css("background-color", "#197647");
      });
      
      // añado mouseleave para que vuelva al color original para que no se quede el color #197647 guardado después de hacer click:

      $(".calc").mouseleave(function(){
        $(this).css("background-color", "#4A5759");
      });
      
      $(".calc").mouseenter(function(){
        $(this).css("background-color", "green");
      });
    
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="calculadora">
        <div class="divinput">
            <input type="text" name="" id="">
        </div>
        <div class="container">
            <div class="calc">%</div>
            <div class="calc">√</div>
            <div class="calc">n²</div>
            <div class="calc">1⁄x</div>
            <div class="calc">CE</div>
            <div class="calc">C</div>
            <div class="calc">DEL</div>
            <div class="calc">÷</div>
            <div class="calc">7</div>
            <div class="calc">8</div>
            <div class="calc">9</div>
            <div class="calc">X</div>
            <div class="calc">4</div>
            <div class="calc">5</div>
            <div class="calc">6</div>
            <div class="calc">-</div>
            <div class="calc">1</div>
            <div class="calc">2</div>
            <div class="calc">3</div>
            <div class="calc">+</div>
            <div class="calc">±</div>
            <div class="calc">0</div>
            <div class="calc">,</div>
            <div class="calc">=</div>
        </div>
</div>

El problema lo tienes debido a la "Especifidad" del CSS. La función css() de Jquery es como definir la regla CSS en un style de HTML, por lo que siempre va a tener mayor prioridad que lo que definas a nivel de CSS.

La mejor solución que se me ocurre es usar la función mouseenter() en vez del :hover de CSS, para así evitar problemas con la especifidad.

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.