时间戳

首页 > 解决方案 > 悬停时的变换按钮

html - 悬停时的变换按钮

问题描述

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

登录按钮变成两个按钮，上面写着：

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

标签： htmljquerycssanimationcss-transitions

解决方案

这是一种用一些简单的css制作的方法；

.login-actions { position: relative; }
.login-actions a { display: inline-block; padding: 1rem 2rem; text-decoration: none; color: #fff; background: #111; }
.login-actions a:not(:first-child) { 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>

推荐阅读