hover移入移出过渡设置

hover移入移出过渡

// hover显示的红色上下动画边框
mian3-item {
	.line {
		height: 120px;
		width: 0;
		display: block;
		position: absolute;
		// 这是关键代码,鼠标移出的过渡
		transition: width .5s, left .5s;
		
		top: -1px;
		left: 50%;
		border-top: 1px solid @redFont;
		border-bottom: 1px solid @redFont;
	}
	// 这是鼠标移入的过渡
	&:hover {
		color: @redFont;

		.line {
			transition: left .5s, width .5s;
			left: 0;
			width: 100%;
		}
	}
}