在做网页的时候这是经常会遇到的一个效果，鼠标滑过一个div的时候内容显示，鼠标移出div的时候内容隐藏。其实这在js中是个非常简单的效果，很好实现，下面我来给大家敲下代码看是如何一步步实现的，大家按照我的步骤来写即可实现这个效果。工具/原料more电脑sublime方法/步骤1/6分步阅读

首先我们先来把css样式写好。这是我们写好的样式在浏览器中的效果。我们看到有个鼠标滑动的按钮，当鼠标滑过这个按钮的时候，下面的黑色内容显示，当鼠标移出这个按钮的时候，下面的黑色内容隐藏起来。

2/6

下面我们来看下代码。其中button是我们的鼠标要滑动的地方，滑过button时，class为content的内容就要显示出来，鼠标滑出去的时候，这块内容就需要重新隐藏起来。

3/6

我们把黑色内容的部分初始状态写成隐藏。只需要在class为content里写上display:none,即可。我们来看下代码和浏览器中的效果。可以看到黑色内容部分已经不见了。

4/6

下面就需要用到js中的onmouseover和onmouseout这两个事件来实现我们的效果了。

5/6

看下代码。把onmouseover和onmouseout两个事件作用在button上面，再写overShow()和overHide()两个 函数。可以看到在函数中通过改content的display属性来实现显示隐藏的效果。我们在浏览器中就可以看到效果了。大家可以尝试下。

6/6

其实jquery中也有封装好的显示隐藏的效果。简单又高效，我们在实际项目中没必要用js这些原生的方法来做这样的效果（后期不好维护）。这篇文章仅供参考练习，让你知道js中原生的实现方法，更多其他的方法大家可以研究一下。实现的方法不止这一种哦。

注意事项

仅供练习参考

更多方法大家可以自行研究，不要仅仅局限这一种方法

如果看不懂的建议去看js的基础知识