StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Avoid relying on :hover</h2> <p>Relying on <code>:hover</code> limits the options on mobile devices. There's no way in JavaScript or jQuery to turn off the <code>:hover</code> state of an element.</p> <p>As an alternative, you could add and remove a <code>.hover</code> class using a combination of mouse events and touch events. If necessary, don't add the mouse events if you detect support for touch events.</p> <p>Here's a <a href="http://jsfiddle.net/FxCmy/" rel="nofollow">JSFiddle Demo</a> with two hover menus. To run it on a mobile device, use this <a href="http://fiddle.jshell.net/FxCmy/show/" rel="nofollow">standalone version of the demo</a>. The first menu uses the <code>:hover</code> pseudo-element, and the second one uses a <code>.hover</code> class.</p> <p>On desktop browsers, the two menus behave the same. But for touch devices, @ErwaySoftware's suggestion was applied to the second menu: If you touch the menu item a second time on a touch device, the dropdown disappears. Of course, this is only appropriate if the menu item itself is not a functional hyperlink (if the only purpose it serves is to open the dropdown).</p> <p><strong>jQuery</strong></p> <pre><code>// Mouse events $('.menu > li').on('mouseover', function(){ $(this).addClass('hover'); }); $('.menu > li').on('mouseout', function(){ $(this).removeClass('hover'); }); // Touch events $('.menu > li > a').on('touchend', function(){ $(this).parent().toggleClass('hover'); }); </code></pre> <p>Be sure to test on Android as well, before proceeding very far with any solution.</p> <h2>Mobile first</h2> <p>The cleanest and easiest approach may be to avoid relying on hover states when supporting mobile devices, and instead rely on clicks/touches to make the menus appear and disappear. In other words, build for mobile first, and then figure out how to make it work on desktop browsers (instead of the other way around).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload