### 现象描述：
开发卡片，对某个组件使用伪类，生成点击变色效果，但是松开手指后产生的变色效果回不去了。

例如原背景色效果：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210218090608464.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

添加伪类后点击效果：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210218090624737.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

正常情况手机点击时产生变色效果，手指松开后变为原来的颜色，实际情况是手指松开后并没有恢复原来的颜色。

此问题是快应用引擎在支持卡片伪类不全导致的，但是方法总比问题多，稍微修改一下代码就可解决。

### 解决方案：
在使用伪类的组件上加个点击事件即可，点击事件中不需做任何逻辑处理示例。

代码如下：

```java
<div class="sitetype_box" widgetid="8e4bf1ca-f716-46f8-8614-16d1b35002c5" onclick="test">
 </div>
```

css样式：

```java
.sitetype_box {
        flex-direction: column;
        background-color:#FFBF00;
        padding: dpConvert(0) dpConvert($elementsMarginHorizontalL) dpConvert(0) dpConvert($elementsMarginHorizontalL);
}
 
     /**伪类 */
    .sitetype_box :active{
        background-color: #E40078;
    }
```

方法：

```java
test(){
         console.log("message");
      }
```

欲了解更多详情，请参阅：

快应用卡片开发指导：

[https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-develop-card](https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-develop-card)

快应用伪类：

[https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-style#h1-1578402140607](https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-style#h1-1578402140607)

---
原文链接：[https://developer.huawei.com/consumer/cn/forum/topic/0201404996846120238?fid=18](https://developer.huawei.com/consumer/cn/forum/topic/0201404996846120238?fid=18)

原作者：Mayism

ITPub博客

卡片开发使用伪类之踩坑记录

最新文章