鼠标滑到盒子上，改变盒子内的文字-CSDN博客

【功能描述】：当鼠标移动到盒子上改变盒子内的原有内容、
【实现思路】：在显示的文字旁放一个span,开始时隐藏，当鼠标移动到盒子上显示该span,并隐藏原有文字。
【注意】：需要给父盒子添加相对定位，子元素添加绝对定位，否则hover时，盒子会改变原有位置。
【代码演示】：

<div class="login" >
	<el-button class="loginbtn" >已退出<span>登录</span></el-button>
	<el-button class="loginbtn" >已登录<span>退出</span></el-button>
</div>

<style>
.login {
	position: relative;
}
.loginbtn {
	position: absolute;
	background: #f4f4f5;
	color: #606266;
	cursor: pointer;
	width: 270px;
	height: 30px;
}
.loginbtn:hover {
	background: #42b983 !important;
	color: #ffffff;
	cursor: pointer;
	font-size: 0;
}
.loginbtn span {
	font-size: 0;
}
.loginbtn:hover span {
	display: block;
	font-size: 12px;
	color: #ffffff;
}
</style>