jQuery mouseenter() 和 mouseleave() 无法正常工作答案

【问题标题】：jQuery mouseenter() and mouseleave() not working properlyjQuery mouseenter() 和 mouseleave() 无法正常工作
【发布时间】：2016-04-24 13:08:29
【问题描述】：

我有两个简单的脚本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");
    });
});

我正在尝试使按钮在鼠标进入时更改类并在鼠标离开时将其更改回的效果，当我将鼠标放在按钮上时，上面的代码似乎无法正常工作闪烁，所以我假设我出于某种原因不断更改课程。

【问题讨论】：

这是因为您正在更改显示属性，当按钮消失时，mouseleave 触发，然后重新出现，mouseenter 触发，使其消失等，您会得到“闪烁”
值得学习的好课...
谢谢！我不知道为什么我没有想到这一点
@adeneo 请把你的答案写在下面，以便它可以被接受并解决该帖子。

标签： javascript jquery html css button

【解决方案1】：

您可以将button 放入div 中，然后在将鼠标悬停在div 上时切换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>

【讨论】：

在这种情况下，最好使用visibility 而不是display，而不是使用div，因为这样您就不需要使用固定高度。
我同意，但 OP 想更改 display，所以我认为这是更合适的答案。
但是使用div 容器的结果与visibility 相同，只是您必须设置固定高度，并且宽度有更大的活动范围，因为@987654336 @ 显示 block 和 button 是 inline-block。
实际上不一样，因为display: none 可以从元素流中删除元素，而visibility 则不会，正如您在此处看到的jsfiddle.net/Lg0wyt9u/591 和jsfiddle.net/Lg0wyt9u/592
但是您的示例也与 OP 的示例不同。如果将Lorem ipsum dolor. 添加到OP 的示例中，则鼠标悬停在Lorem ipsum dolor. 将不会触发显示更改。如果您想在按钮下方添加更多内容，您会始终将其放在div 内吗？然后将鼠标悬停在按钮下方将始终触发显示的更改。如果将其添加到div 之外，那么您将获得与使用visibility 相同的效果，因为您已将height 设置为div。是display还是visibility更好看具体情况。

【解决方案2】：

你的风格应该是这样的

.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>

【讨论】：

OP不想改变颜色，而是显示和隐藏button
欢迎来到 Stack Overflow！这并没有提供原始海报（OP）提出的问题的答案。我建议编辑您的答案，以便为 OP 的问题提供一个很好的答案。