html 隐藏_html操作和思考（三）：基于opacity的应用——按钮的隐藏、出现与加强...

先来看个例子，这是一个切换按钮的三种形态：

图1.1 第一种形态

图1.2 第二种形态

图1.3 第三种形态（左）

1. 鼠标未移入轮播图中：两个按钮隐藏（图1.1）。
2. 鼠标移入轮播图中：两个按钮同时出现（图1.2）。
3. 鼠标移入按钮：底色加深表强调（图1.3）。

以上是一种按钮经典的三种形态，其中2—3可以通过hover简单地实现，但在1—2需要实现“元素的隐藏与出现”。

---

我的方法：

• 使用透明度（opacity：0）。

步骤图解：

图2.1 步骤图解

关键步骤：

• 为按钮盒子添加透明度（opacity）：透明度从0到1遮挡效果依次递增（图2.2）。
• 两个按钮在一个盒子里：可以实现鼠标移入盒子时，两个按钮同时出现。
• 按钮使用绝对定位（position：absolute）：撑开盒子的同时，避免影响轮播图的点击空间和效果（图2.3）。
• 按钮底色变深：通过opacity或者rgba来控制背景颜色透明度，实现强调效果，rgba中的a表示透明度，透明度从0到1遮挡效果依次递增（图2.4）。

图2.2 添加透明度

图2.3 绝对定位

图2.4 强调效果

---

以上就是我在学习前端时的一些小感悟，如果有错误或者更好的方法，欢迎在评论区留言！

啾啾啾~(づ￣ 3￣)づ~