当我们用 :hover 选择器的时候，如果要给鼠标滑过的元素加上边框或者加粗边框的时候，有可能会发生抖动现象（甚至有可能会挤走下面的元素），见下图：

解决方法：

方法一：提前加边框。给元素加上 n像素（想要hover的时候显示多少像素边框就加多少像素） 的和背景色一样的边框（或者干脆将border的透明度为0，eg: border:1px solid rgba(100,100,100,0) ），hover的时候改变边框颜色(和透明度)即可

//html			
<section class="hidn">
    <ul>
	    <li>立即购买</li>
		<li>加入购物车</li>
		<li>收藏</li>
	</ul>
</section>

//css:		
			    .hidn{
				position: absolute;
				width: 330px;
				height:310px;
				top: 0px;
				left: 0px;
				background-color: rgb(100,100,100);
				
			}
			.hidn ul{
				margin-top: 50px;
			}
			.hidn ul li{
				background-color: yellow;
				border: 2px solid rgb(100,100,100); //!!!!!!!!!!
				width: 160px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				padding: 10px;
				list-style: none;
				margin:10px 74px;
				
			}
			.hidn ul li:hover{
				border: 2px solid rgb(255,255,255); //!!!!!!!!!!
			}

方法二：用padding替边框先占位，hover的时候再将位置还给边框（让padding与边框的值此消彼长）。也就是说加入我原本边框为0，我想实现当hover的时候边框为3px且不抖动，就可以先设置一个3px的padding；hover的时候，padding设为0，border设为3px。

.hidn ul li{
    background-color: yellow;
	/*border: 2px solid rgba(100,100,100);一开始不设边框 */
	width: 160px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	padding: 12px;   /*padding: 10px; 本来我想要padding为10的，我想要hover时border为2，故padding设为10+2=12 */
	list-style: none;
	margin:10px 74px;
				
	}
	.hidn ul li:hover{
	border: 2px solid rgb(255,255,255); /*border为2*/
	padding: 10px;   /*padding重新设为10*/
	}