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

这是因为您需要鼠标离开功能

尝试这样的事情

法典：

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

让我知道它是否有帮助

Answer 2

你只能用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>