События мыши на jQuery

Question

Всем привет! Прошу помочь с решением простой задачки. Мне нужно, чтобы наведении курсора мыши на кнопку она меняла стиль и при отведении возвращалась в исходное положение. Через jQuery я создал вот такой код для mouseover:

 `$(function(){
    function changeStyleButton(){
        $('#entrance').css({
            'color': 'green',
            'font-size': '20px',
            'border': '5px solid #FFD700',
            'box-shadow': '0 0 5px 7px blue'
        })
    }

    $('#entrance').on('mouseover', function(){
        changeStyleButton()
    })
})

При наведении он срабатывает и все. Как написать, чтобы при отведении возвращался изначальный стиль. Спасибо.)

Answer 1

$(function() {
  $('#entrance')
    .on('mouseenter', function() {
      $(this).addClass("hovering");
    })
    .on('mouseleave', function() {
      $(this).removeClass("hovering");
    });
})

.hovering {
  color: green;
  font-size: 20px;
  border: 5px solid #FFD700;
  box-shadow: 0 0 5px 7px blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="entrance">AAAAAAAAA</div>

БЛОГ НА HUSL

События мыши на jQuery

Ответы (1 шт):