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

i have created element displayed when on particular box.

if move mouse on box can see element need move mouse in , out twice element disappear. how can fix it? shouldn't element hide once move mouse out?

how make box show when mouse on box?

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

---

i tried hide myself, didn't work:

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

you can use mouseover , mouseout in same eventlistener 1 below:

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

fiddle demo