ボックス上でマウスをスライドさせて、ボックス内のテキストを変更します

【機能説明】：ボックス上にマウスを移動すると、ボックス内の元の内容が変更されます
【実装アイデア】：表示されているテキストの横にスパンを置き、先頭を非表示にします テキストあり
[注]: 親ボックスには相対位置を追加し、子要素には絶対位置を追加する必要があります。そうしないと、ホバー時にボックスが元の位置を変更してしまいます。
[コードデモ]:

<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>