All geek questions in one place

Change the background color of the link when touched

I am trying to change the background color of the link when the user touches / on the mobile phone, although the following code works, sometimes the link stays black and does not go back to white when you release, is there a better way to encode it?

$('#test').bind('touchstart', function() { $(this).css('background-color', 'black'); }); $('#test').bind('touchend', function() { $(this).css('background-color', 'white'); });​

Thanks!

+4
source share
1 answer

This can be done in CSS without jQuery:

 a:active { background-color: black; }

Android Browser Compatibility Note

For some reason, the code above does not work in the Android Android browser (and possibly in some other browsers). However, it will work after adding the ontouchstart="" argument to the <body> as follows:

 <body ontouchstart="">

In addition, the Android Android browser highlights the default links (with a blue background on my phone). To disable this, enter:

 a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

See and for details.

Jsfiddle here

+6
source

Source: https://habr.com/ru/post/1483926/

More articles:


All Articles