使用伪 类 进行卡片开发的案例研究
Case Study for Card Development Using Pseudo-Classes
在开发卡片的时候，我用了一个伪class的组件来实现变色效果。但是，颜色无法恢复。
比如一张图片原来的底色是黄色。See Image
此图为使用伪class后的新背景色。现在是红色的。
See Image
在正常情况下，卡片的背景颜色会在点击时发生变化，而在您抬起手指时会return恢复为原始颜色。那么如何实现呢？
只需使用伪class 向组件添加点击事件。不需要逻辑处理。
示例代码：
<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");
}
在开发卡片的时候，我用了一个伪class的组件来实现变色效果。但是，颜色无法恢复。 比如一张图片原来的底色是黄色。See Image
此图为使用伪class后的新背景色。现在是红色的。 See Image
在正常情况下，卡片的背景颜色会在点击时发生变化，而在您抬起手指时会return恢复为原始颜色。那么如何实现呢？
只需使用伪class 向组件添加点击事件。不需要逻辑处理。
示例代码：
<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");
}