I’ve just added the Focus and Active as i read that should fix it most of the time but it doesn’t seem to have. Is there a way of re-writing it to work without adding JS etc.
Hover is a bit tricky on devices as they all handle it a different way as there is not really a hover on touch. Some devices treat a first touch as a hover and a second touch will activate the link but usually (not always) this is only applied to anchors.
There are various fixes but the simplest is the empty onclick method you are using.
If you really want a hover effect that only stays while the element is touched then you will need js and and do it like this. The js adds a class to the element when touched and removes it on touchend. Its the class that creates the hover effect and not :hover. Unlike the click method you are never stuck with an element being in the hover state.
However, I don’t think the above method would be any benefit to you as you want the link on the hover element to be clicked and that is a little tricky with the method above.