li:hover dropdown menu on mobile devices
Question
How do I get li:hover to work correctly on mobile devices?
On iphone it doesn't even open, on android it doesn't close after touch :S
I want to create a custom dropdown menu and I need the javascript to get information from the li that is clicked.
<!DOCTYPE html>
<title>li:hover dropdown menu on mobile devices</title>
<style>
li ul{display:none}
li:hover ul{display:block}
</style>
<ul>
<li><div id=div>chose</div>
<ul>
<li id=li data-info="som data">level 2
</ul>
</ul>
<script>
window.onload = function(){
document.getElementById('li').onclick = function(){
document.getElementById('div').innerHTML = document.getElementById('li').getAttribute('data-info');
}
}
</script>
2 answers
solution1
0 ACCPTED 2013-09-19 08:43:08
The :hover pseudo-class needs a pointing (graphical input) device, capable of distinguishing the actions pointing and selecting/activating. Usually on mobile devices with a touch interface you don't have the former, only the latter. Also some pen interfaces only allow activating, not pointing.
The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (eg, a pen device).
W3C: CSS 2.1: Selectors, dynamic pseudo-classes
So, to answer your question: It depends on the device but likely no. And don't rely on it. With touch-screen devices quickly gaining in popularity you'll lose the entirety of pointing-only events.
solution2
0 2013-09-19 08:47:14
If you're just looking to get a multi-level menu working on a responsive design, or mobile version, consider this: jQuery Responsive Menu Plugin it turns a list menu into a select. You can specify the viewport for it to kick in, and the menu you'd like to use, or even combine menus.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.