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

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

您可以在mouseover之内使用mouseout和eventlistener，如下所示：

$("#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