What exactly is the rule for applying .activated class?


#1

Hey, anyone know when will .activated class be applied to an element?

I want to add “clicked” effect to my custom buttons and links, but the :active pseudo selector doesn’t seem to work, and it seems like the only element that’s applied .activated class when clicked is <a>

However, since you can’t place an <a> inside one another, there’s no way to achieve “clickable” within “clickable” effect, which is common in many apps.

Anyone got any idea how to resolve this?


#2

:active state will not work on Android devices on non-anchor elements. Technically, it will work only on <a> elements.

Though you can make it work with a little cheat:

<body ontouchstart="">

This will tell the android device to handle touch events and pseudo class :active will work correctly on all elements.


How to make a custom element active in Ionic?
#3

Hi,

Adding ontouchstart="" on my body block has no effect for me.
Plus, I’m not comfortable with changing the body just for several buttons behaviour, because of potential unknown side-effect.

Surrounding my blocks like this: <a><kbm-block>7</kbm-block></a> has no effect too.

Do you have another idea in mind? Thanks.


#4

I’m currently wrapping all the clickable elements with <a></a> and use custom style to shape the box of <a></a> so that it matches the desired area I want the click effect to show.