Hover Interaction - Custom code Conflict

Hi,

I have added some custom code to remove highlights from links on mobile however this is causing a conflict with the hover interaction on the tab fixed to the right to behave randomly / not display when clicked on mobile.

I have pasted the code below for ref.

Any ideas for a solution?

Thanks

Darren

a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } a:focus { outline: 0; border:none; color: rgba(0, 0, 0, 0); }

https://preview.webflow.com/preview/prospex?utm_source=prospex&preview=f68b140db39b75485a7e1421d00b75f9

Link to staging site may help to see the custom code in action…

http://prospex.webflow.io/

Can’t you modify your structure so the interaction isn’t set on the link element, but on something inside or around? This way you can avoid conflicts.

Hi Vincent,

Possibly but I do not understand why there is a conflict? Also, not sure if there is any other way to structure the tab element as the interaction simply displays one element as none and the other as block when on hover?