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.
hover
de jquery la tienes igual en el código? esta mal cerrada, te falta);
y te sobra la coma