logo标签列表

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

javascriptjqueryhtmlcssbutton
3

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

我正在尝试制作一个效果，即当鼠标进入时按钮更改类，鼠标离开时恢复原来的类。上面的代码似乎无法正常工作，当我将鼠标放在按钮上时它会闪烁，我认为它因某种原因不断地更改类。

6
由于更改了显示属性，当按钮消失时，将触发mouseleave事件，然后重新出现，并触发mouseenter事件，导致其不断消失和出现，从而产生"闪烁"效果。 - adeneo
1
好的学习课程... - Paulie_D
谢谢！我不知道为什么我没想到那个。 - John Smith
1
@adeneo 请在下面提供您的答案，以便我们接受并解决帖子。 - geeksal
2个回答
2

您可以将按钮放置在div中，然后在悬停在div上时切换按钮的toggleClass（您还需要在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。 - t.niese
我同意，但是楼主想要改变“display”，所以我认为这个回答更合适。 - Nenad Vracar
1
但是使用 div 容器的结果与使用 visibility 相同，只是您需要设置固定高度，并且宽度上有更大的活动范围，因为 div 具有 block 显示属性，而 button 是 inline-block。 - t.niese
1
实际上它们并不相同，因为使用 display: none 会将元素从元素流中移除，而使用 visibility 则不会，您可以在这里看到 https://jsfiddle.net/Lg0wyt9u/591/ 和 https://jsfiddle.net/Lg0wyt9u/592/。 - Nenad Vracar
但是您的示例也不同于OP的示例。如果您将“Lorem ipsum dolor。”添加到OP的示例中，则在“Lorem ipsum dolor.”上悬停将不会触发显示更改。如果您想在按钮下方添加更多内容，您总是会将其放置在div内部吗？那么，在按钮下方悬停将始终触发显示更改。如果您将其添加到div之外，则与使用visibility相同效果，因为您已将height设置为div。是使用display还是visibility更好取决于情况。 - t.niese
0
你的风格应该像这样
.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>
1
OP不想改变颜色，而是想显示和隐藏“按钮”。 - t.niese
欢迎来到Stack Overflow！这并没有提供原帖提问者（OP）所问的答案。我建议您编辑您的回答，以提供一个好的答案给OP的问题。 - Peter Campbell
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接