Is there a way to remove clicked/hovered/touchstarted/tapped/active/focused status from a link on mobiles?

Question

I tried to find dome duplicates of this question, and there are other threads with the same or with similar questions, but none of these threads include an actual solution.

• No, blur() doesn't work with such links on mobiles
• No, off() and unbind() are not valid options, because I need these items "focusability"

What I'm trying to achieve is:

• A mobile user clicks a list item in a list - the link color changes from white to purple
• As soon as the user restart scrolling, I need this link to lose its active/hovered/touchastarted (etc.) status, and change back to white accordingly.

Is it possible that there's no way to achieve this incredibly simple manual status update? Because, as far as I see at the moment, it's possible. Which is just really unbelievable in 2023...

Please correct me, tell me that I'm wrong, and let me know the secret of manually unhover/unfocus/etc... links on mobiles.

Answer 1

I'm going to answer what I think you're asking, but it's difficult to know without code...

• It sounds like you have a link like this
  • <a href="somewhere.html">Link</a>
• When clicked, it turns from white to purple.
• You'd Like it to turn back to white when the user scrolls

If that is true, try this:

<a href="somewhere.html" class="white">Link</a>

<style>
  .white{color:'white'}
  .purple{color:'purple'}
</style>

<script>
  $(document).ready(function(){
    $('.white').on('click',()=>$('.white').attr('class','purple'))
    $(document).on('scroll',()=>$('.purple').attr('class','white'))
  })
</script>

1. You have your link
2. Create some classes that give the link color
3. When the document is ready, attach an event to the link
4. When the link is clicked it will turn purple
5. When the document is scrolled, anything with the purple class, is given the 'white' class instead.