Прикрепление события при наведении на метод on () не работает

Question

$("button#main-navbar-toggler").on("hover",function(){
    $(this).css({"color":"#6c757d","background-color":"#fff"});
    },
    function(){
    $(this).css({"color":"#6c757d","background-color":"#fff"});
    }
);

Я присоединяю подсказку к событию с помощью метода on (), но он не работает.

Answer 1

При использовании jQuery

$(selector).on('event', function(){
    //code
});

вы можете передать только один обработчик. Поэтому, если вы хотите, чтобы ваш код работал, просто используйте метод hover (), предложенный другими.

Подробнее читайте здесь: https://api.jquery.com/on/

Answer 2

Попробуйте следующий код

$(document).ready(function(){
$("#main-navbar-toggler").hover(function(){
    $(this).css({"color":"#6c757d","background-color":"#fff"});
 
});
});

#main-navbar-toggler{padding:5px; background-color:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button id="main-navbar-toggler">Button</button>

Answer 3

вы можете сделать это даже без jquery, просто используйте css hover, если вы хотите вернуть первоначальный стиль после того, как hover выключен

#main-navbar-toggler{
padding:5px; 
background-color:orange;
}

#main-navbar-toggler:hover{
background-color:red;
color: white;
}

<button id="main-navbar-toggler">Button</button>