先看效果：

###代码思路： 1.新建4个div，加类 2.给类写基本样式 3.写鼠标移进来的效果

###实践代码

    
    
    
    
    
复制代码

###样式代码

复制代码

###实际效果：

###当鼠标移动上去的效果

具体链接： http://runjs.cn/detail/kipg09m3

###解决1像素问题

样式中添加margin-left: -1px;复制代码

###当鼠标移进来时候出现新的问题

在div：hover 中添加定位,占据位置position: relative;复制代码

###边框被覆盖问题链接 http://runjs.cn/detail/jrcqvnu5 ###完整代码

		
    
    
    
    
复制代码

###问题：当当前容器有定位时候时候，该效果没用。

###再度解决：

		
    
	
     
    
    
    
    
复制代码

具体链接效果： http://runjs.cn/detail/ykartdjk