Firefox RDM Touch Simulation doesn't simulate hover?

user_6146688 0
Viewed 359

When using Firefox on a mobile device, touching on an element triggers the :hover pseudo-class. However, when using Firefox on a PC in Responsive Design Mode with Touch Simulation active, the :hover is not triggered by clicking the mouse button on the element. If I turn off Touch Simulation, then hovering the mouse over the element will of course activate :hover, but isn't the point of Touch Simulation to translate mouse-inputs into their corresponding touch-events? If touching an element on a mobile browser activates :hover, then shouldn't clicking the mouse in Touch Simulation also trigger :hover?

Simple JSFiddle to illustrate - view both on PC Firefox in RDM and on mobile Firefox to see the difference.

Am I doing something wrong, or is it a deficiency with Firefox RDM or with my understanding of Touch Simulation?

responsive-design firefox css
1 Answers

As you said, :hover :focus :active are pseudo-classes, according to this link from mozilla :hover matches when the user interacts with an element with a pointing device and problematic on touchscreens. We can achieve same effect :hover does in touchscreen using :active pseudo-class. Or combination of both.

As you said simulation of touch for :hover class is not working in Firefox. There is no promise to support it in future. Touch and pointing device worked in a very different way so its better not to use :hover that need the position of pointer to activate. On the other hand touch screen have no record of position before touch, so :focus :active are better alternative.

I will be happy if it does any help to you. Thanks.

user_63623670
Related