CODEWITHSUNDEEP
htmlcsshovermobile-devices
user2025830
user2025830

Reputation: 902

Hover effect on mobile devices

i have a question to the CSS hover effect. I use a hover for my navigation to activate a submenu with the display class. On mobile devices I have the problem that there is no hover and so i only can click the main menu but can't see the submenu. Is there a way to make this work on mobile devices?

Upvotes: 0

Views: 2624

Answers (2)

ReCycliste
ReCycliste

Reputation: 11

I use the ontouchstart event to fire a mouseenter event, hence this trickles down to a pseudo-class :hover event.

I use it for tooltip purposes to work on mobile devices.

In the following examples I add an event handler for all HTML Collections that have the class w3-tooltip

// On mobile devices the ontouchstart event exists, 
// so we get it to trigger a mouseenter event, hence a :hover() event
function misc_mobileSetup() {
  var list = document.getElementsByClassName("w3-tooltip");
  for (var i in list) {
    list[i].ontouchstart = function() {list[i].mouseenter();};
  }
}

Upvotes: 0

Xriuk
Xriuk

Reputation: 392

On mobile devices the hover property is useless as the user has to scroll the page with fingers, by hovering (keeping pressed) it fires other device options. So the best solution would be opening the submenu by clicking the main menu.

EDIT (as requested by OP):
http://jsfiddle.net/eyyuLs65/

EDIT 2:
http://jsfiddle.net/hp3hy96w/1/

Upvotes: 2

Related Questions