1

Let's say i have this html structure:

<div className="big-square">
    <div className="small-button">button</div>
</div>

I need to show the button on .big-square:hover. It's simple, but what about touch devices? If i'll use simply .big-square:hover css rule, then if user will accidentally click at the location of button, then button will appear and will be clicked instantly. I want to avoid this situation. I've tried to use misc transition delays, but this doesn't work.

Here an example, to make it easier to understand and answer:
https://jsfiddle.net/hznjb8ur/

Jquery is there for sake of simplicity. I would like to avoid using jquery and even js for this case, because i have dozens and hundreds elements like that on a single page, so i'd prefer to solve this with simple css trick.

stkvtflw
  • 12,092
  • 26
  • 78
  • 155
  • 6
    see: http://stackoverflow.com/questions/21261961/hover-event-on-touch-device?rq=1 – Cruiser Jul 14 '16 at 14:13
  • I have tried :hover and it also working with click event on touch device – Văn Quyết Jul 14 '16 at 14:18
  • you can use media query – ashishmaurya Jul 14 '16 at 14:30
  • Making touch devices work with `:hover` is weird. Touch devices are totally different from pointer devices in perspective of interaction. I'm afraid you are going a wrong way. I'd try to figure out a better design, rather than hack a workaround. – Leo Jul 14 '16 at 14:38

2 Answers2

1

The actual "touchables" devices don't support hover because the screens don't know about the pointer (finger or anything else) position.

Microsoft actually is working on that http://www.theverge.com/2016/5/5/11595564/microsoft-3d-touch-kinect-gestures-windows-phones maybe in a near future we can see that behaviour

Wilmer
  • 138
  • 1
  • 8
-1

:hover is not supported by touch devices. :hover functions will only be activated when you click on it on touchscreens.

Why not displaying the button on touch devices instead of hiding it? Else only jquery can help you.

Red
  • 6,599
  • 9
  • 43
  • 85