jQuery idSelector.bind()方法不能很好地工作
jQuery idSelector.bind()方法不能很好地工作
提问于 2018-07-03 10:45:16
我想用鼠标关闭事件来绑定一个按钮。当我将鼠标悬停在按钮上时，样式正在做它的部分工作，但在鼠标退出时，更改的样式并没有被移除。
<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>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-03 10:50:24
这是因为你需要我们鼠标离开函数
试试像这样的东西
代码：
$('#btnSubmit').bind('mouseover', function (event) {
$(this).addClass('ButtonStyle');
})
.bind('mouseleave',function(){
$(this).removeClass('ButtonStyle');
});如果有帮助请告诉我
Stack Overflow用户
发布于 2018-07-03 10:50:51
您只需使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51152608
复制相关文章
相似问题
腾讯云开发者
