使用 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

尝试以下代码

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

使用 jQuery 时

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

只能传递一个处理程序。因此，如果您希望您的代码正常工作，只需按照其他人的建议使用 hover(( 方法即可。

在此处阅读更多内容： https://api.jquery.com/on/

Answer 3

即使没有jquery也可以做到，如果你想在悬停关闭后恢复原始样式，只需使用css悬停

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

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