How can I fix it: hover over the iPhone if there is no <a> element?

Question

How can I fix :hover on iPhone if there is no <a> element?

I use the <li> element and the iPhone does not open my submenu when I insert it.

Html example:

 <ul> <li>Menu item (no <a> element) <ul> <li><a href="#">Menu item</a><li> </ul> <li> </ul> 

I answered the JavaScript method to fix this, but I want to know if there are other ways to fix this (maybe better)

Answer 1

You can fix this using JavaScript. The following script will add the hover class to the class to the <li> element:

 <script type="text/javascript"> $("li").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); </script> 

Just add li.hover where you got li:hover in your CSS:

It:

 ul li:hover ul{ display:block; } 

Will be:

 ul li:hover ul, ul li.hover ul,{ display:block; } 

JQuery documentation:
http://api.jquery.com/hover/
http://api.jquery.com/addClass/

Answer 2

The reason iPhone will respect hover conditions.

 <ul> <li onclick="//">test</li> <li onclick="//">test</li> <li onclick="//">test</li> </ul> 

Answer 3

I found a better way to deal with div: hover to work on iphone. without using javascript

using cursor: pointer so that your element acts as an anchor tag

CSS

ul li {cursor: pointer}

And you will also notice that when you click on the drop-down menu, it does not close on the iphone unless you click on the real link. Since we cannot see the cursor on mobile phones, this is the decision I made.

CSS

body {cursor: pointer}

Answer 4

Although iPhones, etc. specially do not have a freeze state, the freeze state of links is launched when users click on them. Usually a double click will follow the link.

Perhaps restructure your HTML so that you have anchors with a hover state, not just list items. No JS required.

Answer 5

add: focus and: active for your styles:

ul li ul {display: none} ul li: focus ul, ul li: active ul {display: block}

Answer 6

http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/

 //ipad and iphone fix if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) { $(".menu li a").click(function(){ //we just need to attach a click event listener to provoke iPhone/iPod/iPad hover event //strange }); }