0

I have a circular image: enter image description here 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!

Jatin
  • 3,065
  • 6
  • 28
  • 42
user1615573
  • 315
  • 5
  • 18

2 Answers2

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.

  • You could apply the effect you are intending to get through jQuery by applying the click function. And for the text in the center and on the right side, that is possible with css. (Sorry for the general answers, but I am replying from my phone and for now this is the best I can do) –  Apr 02 '14 at 01:12
  • Clicking is fine, if the requirement is to click, is that possible? Any examples that can get me started? Thanks – user1615573 Apr 02 '14 at 01:14
0

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

Community
  • 1
  • 1
Liftoff
  • 24,717
  • 13
  • 66
  • 119