Making a calculator, I want when the cursor passes over the keys background
it turns green, and when the keys are clicked the background turns a different green. For the :hover
I have used css
, for the click I have (tried) to use 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>
The de jQuery
works fine, but the :hover
de css
no longer works or works unpredictably.
I have tried to do the hover
also injQuery
$(".calc").hover(function(){
$(this).css("background-color", "green");
},
But then the click is the one that doesn't work.
The problem you have is due to the "Specificity" of the CSS . The function
css()
of Jquery is like defining the CSS rule in an HTMLstyle
, so it will always have a higher priority than what you define at the CSS level .The best solution I can think of is to use the function
mouseenter()
instead of the:hover
CSS one , to avoid problems with specificity.