javascript - Touches causing hover on elements which appear beneath the touch -


i'm making date picker in javascript , css. it's working fine, have problem touch devices. when picker appears, looks this:

enter image description here

clicking on year @ top (in example '1983') results in content of picker changing year selection, this:

enter image description here

this works on desktop. on mobile (ios specific) touch event on picker causes hover on div after touch has ended , div content has changed, resulting in effect:

enter image description here

the year 1980 has been highlighted though user hovering on it, , element beneath touch position opened view.

all of elements on picker divs , styling done css classes, outline on hovered items being added using :hover on class.

i can provide specific code if needed, provide enough information idea across.

here solution:

http://mvartan.com/2014/12/20/fixing-sticky-hover-on-mobile-devices

essentially, boils down using :hover on desktop , :active on mobile.


Comments