1、输入代码，其中button是鼠标要滑动的地方，滑过button时，class为content的内容就要显示出来，鼠标滑出去的时候，这块内容就需要重新隐藏起来。
2、把黑色内容的部分初始状态写成隐藏。只需要在class为content里写上display:none,即可。
3、来看下代码和浏览器中的效果。可以看到黑色内容部分已经不见了。
4、把onmouseover和onmouseout两个事件作用在button上面，再写overShow()和overHide()两个 函数。可以看到在函数中通过改content的display属性来实现显示隐藏的效果。
5、在浏览器中就可以看到效果了。
首先，楼上说得很对，你之所以出现图片抖动的原因是因为，border变为2px的时候，整个盒子的width和height都变了，浏览器对整个排版会重新解析，导致这个盒子和出现一些挤压。
细说一下，浏览器对盒模型的解析，会影响盒子的width宽度、height高度的属性有边框(border)、内补丁(padding)、外补丁(margin)。显然一个盒子真实宽度=width+border*2+margin*2；真实高度=height+border*2+margin*2；而padding是只会影响内容的编排，
举例说明，我定义了一个宽度高度都是100px的div，margin，border，padding都是10px；最后在火狐的视图下看和模型，浏览器的解析结果是120px，如图所示：
<div style="width:100pxheight:100pxborder:10pxmargin:10pxpadding:10px"></div>总言之，为了防止你出现图片的抖动，主要就是要达到鼠标放上去之后的盒子的总宽度和总高度是不变的才行：
所以我的意见是：
<style type="text/css">#box{width:100pxheight:100pxborder:1px solid #ccc}
#box:hover{width:98pxheight:98pxborder:2px solid #ccc}
</style>
<div id="box"></div>
你可以试一下，不懂欢迎再和我探讨……
图片经过的时候出现的样式，比如<img src="aaa.jpg" alt="" title="" class="GQ"/>
这样的话就可以写成
.GQ:hover {
border:2px solid #000
}
写在css里面。hover前面的是你的图片的选择器。
这样的话，是鼠标经过的时候边框变成黑的2像素
