鼠标滑动切换界面

当鼠标滑到目标位置时，显现出详细内容

我们在一些网站上浏览的时候经常会碰到这种情况，鼠标没在一个图标上时，什么都没有，滑动鼠标过去时，会出现许多详细介绍，鼠标离开时又消失了。这是怎么实现的呢？ 今天我们要解决的问题就是这个。

先建立一个默认存在的界面

<div class="section-rbottom">
						<img src="img/1_55.png"/>
						<p>工商诉讼数据</p>
						<p>￥ 500</p>
						<p>累计交易：1500.00元</p>
					</div>

这个时候就跟没有鼠标滑上去的界面是一样的，我们可以给他设置成我们喜欢的样式，或者说画面更好看一些。

.section-rbottom{
	width:235px;
	height: 272px;
	background-color: #fff;
	float: left;
	margin-right: 6px;
	margin-bottom:6px;
	text-align: center;
}
.section-rbottom img{
	margin:50px auto 0px;
}
.section-rbottom p:nth-child(2){
	font-size: 16px;
	font-family: "微软雅黑";
	margin-top: 20px;
}
.section-rbottom p:nth-child(3){
	font-size: 14px;
	color: #ffa200;
	margin-top: 27px;
	font-weight: bold;
}
.section-rbottom p