纯css写鼠标放上去背景从左到右，从黑到白

<div class="header "></div>

css部分

.header {
		display: inline-block;
		position: relative;
		width: 120px;
		height: 20px;
		text-align: center;
		color: #000;
		background: #FFFFFF;
		cursor: pointer;
		border: 1px solid #000;
		transition: 2s;
	}

	// .header:after,
	.header:before {
		content: '';
		position: absolute;
		left: -1px;
		top: -1px;
		width: 0;
		height: 100%;
		background: #FFFFFF;
		z-index: -2;
		border: 1px solid;
	}

	.header:hover {
		color: #FFFFFF;
		z-index: 1;
		background: transparent;
	}

	.header:before {
		color: #fff;
		transition: 2s;
		background: #000;
		z-index: -1;
	}

	// .header:hover:after,
	.header:hover:before {
		color: #000;
		width: 100%;
	}