我有两个简单的脚本 html:

<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");
    });
});

我试图做出这样的效果,当鼠标进入时按钮更改类并在鼠标离开时将其更改回来,上面的代码似乎无法正常工作,当我将鼠标放在按钮上时它会闪烁,所以我想我出于某种原因不断地换类。

最佳答案

你可以把button放在div里面,然后当你悬停在button上时toggleClass of div(你还需要在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>

关于javascript - jQuery mouseenter() 和 mouseleave() 无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36823523/

10-16 21:07