Javascript 当“鼠标悬停”完成时，如何关闭切换？

我已经创建了一个元素，当我在一个特定的框上时会显示该元素

如果我将鼠标移到盒子上，我可以看到我的元素，但是我需要将鼠标移入移出两次，元素才能消失。我怎样才能修好它？一旦我将鼠标移出，元素不应该隐藏起来吗

如何使我的方框仅在鼠标位于方框上方时显示

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

---

代码的问题是使用onmouseout而不是mouseenter和mouseleave方法

您可以使用悬停：

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

---

您可以在同一个

eventlistener

中使用

mouseover

和

mouseout

，如下所示：

$（“#框”）。在（“鼠标悬停”上，函数（）
{                  
$（“#我的盒子”）.toggle（）；
});
#我的盒子{
显示：无；
}

这个盒子
我的箱子
您可以将两者结合使用

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

jQuery解决方案
HTML

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

CSS

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

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

#hidden{
    display: none;
}


尽管只使用CSS会更好

CSS唯一解决方案
谢谢。我喜欢你完整的例子。随时。。快乐编码…）
.box{
    width: 30px;
    height: 30px;
    background: red;
    margin: 10px;
}

#hidden{
    display: none;
}

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

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

#hidden{
    display: none;
}