jq怎样实现鼠标经过隐藏，离开显示div层呢
jQuery里面封装了许多方法，比如我们可以通过调用hide和show方法来隐藏或者显示div层以及其他元素。
操作方法
- 01
如图，先做一个界面实例，这里我就设置了一个p和一个div标签。
- 02
接着设置p标签的样式，具体样式可以根据自己的情况设置。
- 03
同理，再设置一下div标签的样式，这样可以方便我们进行观察。
- 04
如图，样式设置好之后就可以预览效果了。 现在我们想要实现的效果是：当鼠标经过红色部分的时候，下面绿色div部分就会自动隐藏，而当鼠标离开红色部分的时候，绿色div部分再次显示出来。
- 05
现在开始实现效果，如图，引入jq插件，然后书写一个jq入口函数。
- 06
接着写鼠标经过时候的效果，通过jQuery("p")获取到p元素，然后触发mouseover函数，而在mouseover里面又获取到div元素，然后div元素调用hide()方法，就会隐藏。
- 07
而鼠标离开的效果则是相反的。使用jQuery获取到p元素之后触发mouseleave函数，然后执行函数体里面的语句，即div元素执行显示操作。 这样，鼠标经过/离开，隐藏/显示div层的效果就出来了。
- 08
鼠标经过隐藏显示div层源码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ background: red; width: 150px; height: 50px; } div{ width: 150px; height: 150px; background: greenyellow; } </style> <script src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> <style type="text/css"> #s{ width: 150px; height: 150px; background: greenyellow; } p{ background: red; width: 150px; } </style> <script src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery("p").mouseover(function(){ jQuery("div").hide(); }) jQuery("p").mouseleave(function(){ jQuery("div").show(); }) }) </script> </script> </head> <body> <p>经过我显示隐藏</p> <div> 搜狗指南 </div> </body> </html>