jQuery idSelector.bind () метод не работает идеально

Question

Я хочу связать кнопку с событием наведения мыши. При наведении курсора мыши на кнопку стиль выполняет свою роль, но при наведении мыши измененный стиль не удаляется.

<script>
    $(document).ready(function () {            
        $('#btnSubmit').bind('mouseover mouseout', function (event) {

             if (event.type = 'mouseover') {
                $(this).addClass('ButtonStyle');
            }
            else  {
                $(this).removeClass('ButtonStyle');
            }
        });
    });
</script>


 <style>
    .ButtonStyle
    {
        background-color:red;
        font-weight: bold;
        color: white;
        cursor: pointer;
    }
</style>

Answer 1

Вы можете просто сделать это ТОЛЬКО с помощью css:

.btn:hover{
background-color:red;
font-weight: bold;
color: white;
cursor: pointer;
}

<button class="btn">try hover me</button>

ИЛИ отдельно это для буксировки функции:

    $(document).ready(function () {            
        $('#btnSubmit').bind('mouseover', function (event) {
                $(this).addClass('ButtonStyle');
        });
        $('#btnSubmit').bind('mouseout', function (event) {
                $(this).removeClass('ButtonStyle');
        });

    });

    .ButtonStyle
    {
        background-color:red;
        font-weight: bold;
        color: white;
        cursor: pointer;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSubmit">Try hover me</button>

Answer 2

Это потому что вам нужна функция выхода из мыши

Попробуйте что-то вроде этого

Код:

 $('#btnSubmit').bind('mouseover', function (event) {
        $(this).addClass('ButtonStyle');
    })
    .bind('mouseleave',function(){
        $(this).removeClass('ButtonStyle');
    });

Дайте мне знать, если это поможет