鼠标悬停完成后如何关闭切换？

Question

我创建了一个元素，当我位于特定框上方时会显示该元素。

如果我将鼠标移到框上，我可以看到我的元素，但我需要将鼠标移入和移出两次以使元素消失。我该如何解决？鼠标移出后元素不应该自己隐藏吗？

如何让我的框仅在鼠标悬停在框上时显示？

<script>
$("#box").on("mouseover",function()
{                  
   $("#my-box").toggle();
});
</script>

我自己试过隐藏，没用：

 $("#box").on("onmouseout", function()
 {
     $("#my-box").hide();
 });

Answer 1

您的代码存在问题，您使用的是 onmouseout 而不是 mouseenter 和 mouseleave 方法。

您可以使用悬停：

$('#box').hover(function(){
   $('#my-box').toggle();
});

Answer 2

您可以在同一个 eventlistener 中使用 mouseover 和 mouseout，如下所示：

$("#box").on("mouseover mouseout",function()
{                  
   $("#my-box").toggle();
});

#my-box{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
    Box here
</div>
<div id="my-box">
    My Box
</div>

FIDDLE DEMO

Answer 3

您可以结合使用两者

$("#box").mouseover(function() {
    $("#my-box").show();
}).mouseout(function() {
    $("#my-box").hide();
});

Example

Answer 4

jQuery 解决方案

HTML

<div class="box" id="action"></div>
<div class="box" id="hidden"></div>

JS

$("#action").on("mouseover mouseout",function()
{
    $("#hidden").toggle();
});

CSS

.box{
    width: 30px;
    height: 30px;
    background: red;
    margin: 10px;
}

#hidden{
    display: none;
}

JSFiddle

虽然最好只使用 CSS。

CSS唯一的解决方案

.box{
    width: 30px;
    height: 30px;
    background: red;
    margin: 10px;
}

#action:hover + #hidden{
    display: block;
}

#hidden{
    display: none;
}

JSFiddle

鼠标悬停完成后如何关闭切换？

How to make toggle off when on mouse over is done?

javascript

jquery

onmouseover

Example

jQuery 解决方案

CSS唯一的解决方案