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…

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?