悬停时的转换按钮

Question

我试图在html和CSS中实现一种效果。我有一个按钮，上面写着“登录”。所以我想做的是当我悬停的时候：

“登录”按钮将转换为两个按钮,分别表示：

“客户登录”和“管理员登录”。

Answer 1

使用jquery，我们可以进行以下示例中的检查

null

$(".hide").hide();
$(".hoverHide").mouseover(function(){
$(".hoverHide").hide();
$(".hide").show();
});

$(".hoverHide").mouseleave(function(){
$(".hoverHide").show();
$(".hide").hide();
});

.login {
width:300px;
padding: 10px;
background: #ccc;
}

.login button {display:inline-block;margin: 5px 4px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="login">
<p>Login</p>
<input type="text"/>
<input type="password"/><br>
<button class="hoverHide">Login</button>
<div class="hide"><button>Customer Login</button> <button>Admin Login</button></div>
</div>

Answer 2

这里有一种用一些简单的CSS来制作的方法；

null

.login-actions { position: relative; }
.login-actions a { display: inline-block; padding: 1rem 2rem; text-decoration: none; color: #fff; background: #111; }
.login-actions a:nth-child(n+2) { opacity: 0; }
.login-actions:hover a:not(:first-child) { opacity: 1; }
.login-actions:hover a:first-child { opacity: 0; position: absolute; left:0; top: 0; z-index: -1; }

<div class="login-actions">
  <a href="#">Login</a>
  <a href="#">Customer Login</a>
  <a href="#">Admin Login</a>
</div>