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