Javascript jQuery mouseenter（）和mouseleave（）工作不正常_Javascript_Jquery_Html_Css_Button

Javascript jQuery mouseenter（）和mouseleave（）工作不正常

javascript jquery html css button

Javascript jQuery mouseenter（）和mouseleave（）工作不正常,javascript,jquery,html,css,button,Javascript,Jquery,Html,Css,Button,我有两个简单的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&

我有两个简单的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>

我试着做一个效果，当鼠标进入时，按钮改变类，当鼠标离开时，按钮改变类，上面的代码似乎不能正常工作，当我把鼠标放在按钮上时，它会闪烁，因此，我假设我出于某种原因不断更改类。

您可以将

按钮放在div
内，然后当您将鼠标悬停在div
上时，切换按钮的类（您还需要在div上设置固定的高度）

$（'div'）。悬停（函数（）{
$（this）.find（'button'）.toggleClass（'myBtn'）；
});
div{
高度：50px；
}
.myBtn{
显示：无
}

点击我！
你的风格应该是
.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>


.myBtn{
背景色：红色；
}
.myBtnReg{
背景颜色：绿色；
}
点击我！
这是因为您正在更改显示属性，当按钮消失时，鼠标会启动，然后再次出现，鼠标会启动，使其消失，等等。您将获得“闪烁”的好教训…谢谢！我不知道为什么我没有想到that@adeneo请将您的答案放在下面，以便接受并解决帖子。在这种情况下，与其使用div
，不如使用visibility
而不是display
，因为这样您就不需要使用固定高度。我同意，但OP希望更改显示
，因此我认为这是更合适的答案。但是使用div
容器，结果与可见性
相同，只是您必须设置固定高度，并且宽度的活动范围更大，因为div
有displayblock
和按钮
是inline block
。实际上它不一样，因为使用display:none
可以从元素流中删除元素，而使用visibility
则不会像您在这里看到的那样，但是您的示例也与OP的示例不同。如果将Lorem ipsum dolor.
添加到OP的示例中，然后鼠标在Lorem ipsum dolor上移动。
不会触发显示的更改。如果您想在按钮下方添加更多内容，是否总是将其放在div
中？然后，按钮下方的鼠标将始终触发显示的更改。如果将其添加到div
之外，则效果与使用visibility
相同，因为您已将高度设置为div
。如果显示
或可见性
更好取决于具体情况。OP不想更改颜色，但想显示和隐藏按钮欢迎使用堆栈溢出！这并不能回答原始海报（OP）提出的问题。我建议编辑您的答案，为OP的问题提供一个好的答案。
<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>