的jQuery的mouseenter（）和鼠标离开（）无法正常工作

我有两个简单的脚本的HTML：的jQuery的mouseenter（）和鼠标离开（）无法正常工作

<html> 
<body> 
<style> 
.myBtn{ 
    display: none 
} 
.myBtnReg{ 
    display: block 
} 
</style> 
<button class="myBtnReg" id="btn1" >Click Me!</button> 
<script src="jquery-1.11.2.min.js"></script> 
<script src="js.js"></script> 
</body> 
</html>

和javascript：

$(function(){ 
    $("button").mouseenter(function(){ 
     $(this).attr("class", "myBtn"); 
    }); 
    $("button").mouseleave(function(){ 
     $(this).attr("class", "myBtnReg"); 
    }); 
});

我试图让效果在按钮的变化当鼠标进入鼠标类并在鼠标离开时将它改回来时，上面的代码似乎不能正常工作，当我将鼠标放在闪烁的按钮上时，所以我认为我因为某种原因不断改变类。

来源

2016-04-24 Vadim Tatarnikov

这是因为你改变显示属性，当按钮消失，鼠标离开火灾，那么它再次出现，而火灾的mouseenter，使其dissapear等，你会得到“闪烁” – adeneo

好教训... –

谢谢！我不知道为什么我没有想到 –

你可以把button内div然后toggleClass的button，当你将鼠标悬停在div（你还需要设置固定高度上格）

$('div').hover(function() { 
 
    $(this).find('button').toggleClass('myBtn'); 
 
});

div { 
 
    height: 50px; 
 
} 
 
.myBtn { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <button class="myBtnReg" id="btn1">Click Me!</button> 
 
</div>

来源

2016-04-24 13:18:23

在这种情况下，使用'visibility'代替'display'可能会更好，因为那样你就不需要使用固定的高度。 –

我同意但OP想改变'display'，所以我认为这是比较合适的答案。 –

但是'div'容器的结果与'visibility'相同，只是必须设置一个固定的高度，并且宽度有一个更大的活动范围，因为'div'具有显示'block'和'button'是'inline-block'。 –

你的风格应该是像

.myBtn{ 
    background-color:RED; 
} 
.myBtnReg{ 
    background-color:Green; 
}

您的总HTML是这样

<html> 
<body> 
<style> 
    .myBtn{ 
     background-color:RED; 
    } 
    .myBtnReg{ 
     background-color:Green; 
    } 
</style> 
<button class="myBtnReg" id="btn1" >Click Me!</button> 
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> 
<script src="js.js"></script> 
</body> 
</html>

来源

2016-04-24 13:43:30 Bibhuti

OP不想改变颜色，但要显示和隐藏“按钮” –

欢迎使用堆栈溢出！这并不能提供原始海报（OP）所提问题的答案。我建议编辑你的答案，为OP的问题提供一个很好的答案。 –

的jQuery的mouseenter（）和鼠标离开（）无法正常工作

回答

相关问题