很多时候我们在各类网站上都能看到鼠标移到某个位置上的时候会扩展出新的div或者其他html元素。
首先，单纯的使用CSS中的hover看上去很难实现，所以使用juqery的mouseover()和mouseout()就很好实现啦！
【step 1】因为是使用jquery的方法，所以不要忘记导入jquery。
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>【step 2】在body里写两个div用于测试（id分别是a和b，一个红色一个黑色，宽高分别是300px）
<div style="background-color:red;width:300px;height:300px;" id="a"></div> <div style="background-color:black;width:300px;height:300px;" id="b"></div>【step 3】js编写 1)在一开始先hide掉需要弹出的元素
$(function(){ $("#b").hide(); });2)一旦移动到a上后就显示b，同时一旦移开了a就再隐藏b
$("#a").mouseover(function(){ $("#b").show();}); $("#a").mouseout(function(){$("#b").hide();});3)此处添加一下，如果鼠标从a离开但是在b上，还是继续显示b的效果
$("#b").mouseover(function(){ $("#b").show(); }); $("#b").mouseout(function(){ $("#b").hide(); });html
<head> ... <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> ... </head> <body> <div style="background-color:red;width:300px;height:300px;" id="a"></div> <div style="background-color:black;width:300px;height:300px;" id="b"></div> </body>javascript
$(function(){$("#b").hide();}); $("#a").mouseover(function(){$("#b").show();}); $("#a").mouseout(function(){$("#b").hide();}); $("#b").mouseover(function(){$("#b").show();}); $("#b").mouseout(function(){$("#b").hide();});mouseover()与mouseout()方法不仅可以用来实现显示新的元素，还可以用来实现很多其他的相对于css中直接改变元素的复杂的交互效果。 比如移动到一个元素上后该元素放大并显示一个新的div，其中包含其详细信息等等。
