关于两个div的显示与掩藏

Question

首先，两个div是兄弟关系，分别是div1和div2；我想当我鼠标移到div1时：div1掩藏，div2显示；当鼠标离开div2时：div1显示，div2掩藏；div2里面有一个<ul>。以下是我的布局,但是无法实现想要的效果，每次鼠标停在<li>的范围里就能实现效果，一旦移到每个li之间的间隙时，div2就掩藏了，但是还没离开div2的范围，请问这是为什么？希望各位路过大神解答。。

Answer 1

<style>&nbsp; .btn-slide-right li {width:200px;height:50px;border:1px solid&nbsp; &nbsp;red;margin-top:10px;}</style><div class = "btn-slide-hover" style = "position:fixed;top:300px; right:0; width:20px;height:200px;background-color:#dcdfdf;border-right:none;"></div><div class = "btn-slide-right" style = "position:fixed;right:0; display:none; border:1px solid red;width:100px;height:200px;z-index:9999;top:300px;">&nbsp; &nbsp; <ul class = "ul">&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; </ul></div><script>&nbsp; &nbsp; $(".btn-slide-hover").hover(function(){&nbsp; &nbsp; &nbsp; &nbsp; $(".btn-slide-right").show(500);&nbsp; &nbsp; &nbsp; &nbsp; $(this).hide();&nbsp; &nbsp; });&nbsp; &nbsp; $(".btn-slide-right").mouseleave(function(){&nbsp; &nbsp; &nbsp; &nbsp; $(".btn-slide-hover").show(500);&nbsp; &nbsp; &nbsp; &nbsp; $(this).hide();&nbsp; &nbsp; })</script>把mouseout换成mouseleave就好了（虽然我也是新手，但我同事要是像你那样写代码，我会想掐死他）