Case Study for Card Development Using Pseudo-Classes

Question

While developing a card, I used a pseudo-class for a component to implement a color changing effect. However, the color cannot be restored. For example, the original background color of a picture was yellow.See Image

This figure shows the new background color after using the pseudo-class. It is red now. See Image

In normal cases, the card’s background color is changed upon tapping, and will return to the original color when you lift your finger. So how to achieve this?

Answer 1

Simply add a tap event to the component using the pseudo-class. No logic processing is needed.

Sample code:

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

CSS style:

.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;
    }

Method:

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

For Details,check Pseudo-classes for quick apps