Skip to main content
Se agregan acentos graves para resaltar palabras clave.
Origen Enlace

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

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

He probado a hacer el hoverhover también en jQueryjQuery

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:

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

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:

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

se eliminaron 80 caracteres en el cuerpo
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

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>

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;
}

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"); },

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

Haciendo una calculadora:

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

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;
}

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"); },

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");
      },
Origen Enlace
Javier Cake
  • 1.5k
  • 1
  • 14
  • 38

¿Por qué no funciona :hover después de usar Jquery?

Haciendo una calculadora:

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

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;
}

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.