0

I am looking to try and make my current mobile site have the look and feel of a native app for iOS, Android and Windows Phone by giving the user some feedback when they click a link.

What I am looking to do is when a user clicks a link it changes the background colour of that element to show that they have interacted with that element. I've tried using :active, :focus and :focus for these but they have different interactions on all the different platforms.

For instance if you use :hover on an element, when scrolling on iOS in Safari the background colour changes even though you're trying to scroll.

An example of what I'd like to do can be seen on http://bbc.co.uk/news but it seems they're using JavaScript to add a class that changes the colour of the text.

If I can get away without using JavaScript I would be greatful, but if this is the only cross-platform way of doing this I guess I'll bite the bullet!

Thanks in advance

ChronixPsyc
  • 478
  • 1
  • 8
  • 22
  • 2
    Javascript is really the best way to handle this. While :hover could solve for 70% of use cases, it is much more reliable to use a javascript implementation that will take into account touch events, pointer events and scroll events. This also makes it much more extensible for when you inevitably want to add more UI behavior to this interaction. – Jonathan Kempf Nov 30 '15 at 16:01
  • @JonathanKempf Thanks for the info, I guess I'll have to do it the JavaScript way then – ChronixPsyc Nov 30 '15 at 16:30

0 Answers0