---
date: 2022-08-03
title: Uniapp 实现按钮 hover 样式
category: experience
cover: https://ts1.cn.mm.bing.net/th/id/R-C.d37dfc5600c064753c4670acf9d30ee6?rik=ojMqZF7vNy7z1Q&riu=http%3a%2f%2fsilianpan.cn%2fua-doc%2flogo.png&ehk=IFvwbgsq9BcnLJz73Wm0lTNOYcPtF8nnEIKnMa%2fGRhk%3d&risl=&pid=ImgRaw&r=0
location: 甘肃
tags:

- Uniapp
- hover

---

# background-image/background 不支持CSS3 transition

在 `uniapp` 中是不能使用 `:hover` 这个伪类的，所以一般的实现方法就是在一个特定条件下让它触发同 `:hover` 一样的动画效果即可。

比如头图这个登录场景，可以通过判断账号密码是否有值来决定要不是让他出现变色动画。

```vue

<button :class="!isDisabled ? 'login_btn active' : 'login_btn'" form-type="submit" :disabled="isDisabled">
<u-icon name="arrow-rightward" color="#fff" :size="50"/>
</button>
```

我们通过判断判断 `isDisabled` 这个变量的状态来动态的禁用这个 `button` 及添加 `css` 类

```sass
.login_btn {
  background: rgba(229, 229, 229, 1);
  border-radius: 50%;
  width: 120rpx;
  height: 120rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-position 2s;
  z-index: 1;
}

.login_btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(41, 121, 255, 1) 0%, rgba(146, 194, 252, 1) 100%);
  opacity: 0;
  transition: opacity .5s;
  z-index: -1; 
}

.login_btn.active::before {
  opacity: 1;
}
```

通过 `::before` 这个伪类的显隐给咱们的 `button` 上色

在普通的前端开发中只需要将 `css` 改成如下

```sass
.login_btn:hover::before {
  opacity: 1;
}
```