Почему оно не функционирует: hover, использовав Jquery?

Делая калькулятор, я хочу, что, когда курсор пройдет по клавишам background станьте зеленым, и когда clicke в клавишах фон будет класться различной зелени. Для :hover я использовал css, для click я (попытался) использовать 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>

Это jQuery функционируй хорошо, но однако :hover css уже оно не функционирует или это делает impredeciblemente.

Я попытался делать hover также в jQuery

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

Но тогда click - тот, который не функционирует.

2
задан 19.03.2019, 15:05
1 ответ

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

Проблема это у тебя есть ввиду "Специфичности" CSS . Она funciГіn css() из Jquery, - как HTML определяет правило CSS в одном style из , которым всегда он будет иметь большее первенство, чем то, что ты определяешь на уровне CSS .

Лучшая soluciГіn, что со мной случается, состоит в том, чтобы использовать ее funciГіn mouseenter() вместо :hover CSS , для asГ - предотвращать проблемы со специфичностью.

3
ответ дан 02.12.2019, 05:27