How to make hover or click on content in a circular image and display on mobile devices

Question

I have a circular image: What I want to do is as a mouse hovers (or clicking) over the various color boxes, have text/content displayed in the middle and to the right of it. The catch is how can I make this also display as intended on a mobile device?

Any pointers/examples to get me started is immensely helpful, thanks!

Answer 1

The hover function doesn't apply for mobile devices, as far as I know. What I mean by this is that you can not hover on a mobile device in order to see the effect happening.

Answer 2

If you want different parts to be clickable/hoverable, you can do this with coordinates or area/similar tags.

The :hover state is unsupported (for the most part, as it is called when the element is clicked) on mobile devices, so you would probably want to call this on click events instead.

Further reading on <area>

Getting click coordinates with jQuery