使用伪类进行卡片开发的案例研究

【问题标题】：Case Study for Card Development Using Pseudo-Classes使用伪类进行卡片开发的案例研究
【发布时间】：2021-06-10 07:16:28
【问题描述】：

在开发卡片时，我使用了一个组件的伪类来实现变色效果。但是，颜色无法恢复。比如图片原来的背景颜色是黄色的。See Image

此图显示了使用伪类后的新背景颜色。现在是红色的。 See Image

在正常情况下，卡片的背景颜色在点击时会发生变化，当您抬起手指时会恢复原来的颜色。那么如何实现呢？

【问题讨论】：

标签： huawei-mobile-services huawei-developers card

【解决方案1】：

只需使用伪类向组件添加一个点击事件。不需要逻辑处理。

示例代码：

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

CSS 样式：

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

方法：

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

详情请查看Pseudo-classes for quick apps

【讨论】：