iPhone上的触摸菜单–是否可以通过使用简单的标记并结合：hover状态来实现？

Question

Today I have launched a WordPress blog it took me much time to develop the theme for. Now it was the first time I could request the site via iPhone I was just shocked. I thought it would be a simple task to realize a touch menu by writing simple HTML and styling it taking advantage of the :hover-state to display or not display it's content.

If you switch your Browser to a mobile user agent and load this site (make the window about 640px wide before), you will see my light blue widget bar. Hovering over the icons on it will toggle the inner containers with the main widget contents — works like a charm.

Unfortunately, when I call the site on my iPhone, that bar with the icons will appear but will not be touchable at all. Damn! What's wrong with my code? I hope you can help me. Thanks in advance

Answer 1

Here is what I found with hover in iOS. http://www.websitecodetutorials.com/code/iPhone-&-iPad/apple-iPhone-iPad-IOS-simulate-hover.php . It may be the fix to your problem. Or others down the road.

"With the rule -webkit-transition:all 0.3s ease-in-out; (and possibly others) in place iOS won't hover unless you add display:none/display:block or display:table/display:block. Additionally I found that, without the hover code in place, if you actually have a destination link in the href, upon clicking it, it just strait launches to it. With the code in place, you click once for hover event, and an additional time to follow the link. So if you find the iOS device won't (or correctly) hover for whatever reason here is your probable fix."

Answer 2

Now I figured out I never could get it working the way I wanted when posting this question (I'm sorry the link doesn't show it anymore). Explanation: My markup was like:

<li class="widget-container">
    <p class="widget-title">Categories</p>
    <div class="widget-content">
        <ul>...</ul>
    </div>
</li>

The style was like:

.widget-content                         {display:none}
.widget-container:hover .widget-content {display:block}

I'd love to code as simple as this but it won't work for a good reason: On touch devices, the touch-action is always targeting the uppermost object in z-index which in this example would be the .widget-title . Thatfor, the wrapping .widget-container can never be touched and thus its :hover -state will never be triggered.

This exercise made me recognize a touch-screen-optimized site has to incorporate JavaScript to work well. So I came up with a jQuery accordion solution now.