### 現象描述：
開發卡片，對某個元件使用偽類，生成點選變色效果，但是鬆開手指後產生的變色效果回不去了。

例如原背景色效果：

![在這裡插入圖片描述](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

卡片開發使用偽類之踩坑記錄

相關文章