Hover Interaction - Custom code Conflict


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?



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


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


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?