How to add active background color to link when touched


#1

I want to add a active status to all my link, for example make background color brighter so that user can notice its been clicked on, what is the best way to do this? I tried css like this:

a:active{
background-color:rgba(0,0,0,0.1);
}

But this only works on Chrome, and on my phone it doesn’t react fast enough to show the active background, it only shows the active background when I touch and hold it.


#2

For that, try this instead

.item-content.activated{}


#3

Hi,

The code doesn’t seem to be working.


#4

Yeah, codepen has been acting up. Try visiting the page through http instead of https


#5

I think I have performance issue with my code. trying to make it work on tabs, and when touch the screen the activated effect works randomly, but if I hold it a little longer it will work. Also the tab switch experience a small delay, it doesn’t work very well if I switch quickly between tabs.


#6

The active background colour won’t work If I tap the screen fast enough.


#7

I’m having the same issue. If I hold my finger on the item it will activate however if I do a quick tap nothing appears.


#8

tried but not working on touch laptop or android phone, please help