javascript - Change :hover on iPad So First Touch is Registered as onclick and :hover Functionailty Still Works -
i'm porting on web page work on ipad (since company uses). on desktop used :hover navigate menus. on ipad need able click on menu item expand menu (which works fine). have added onclick event supposed display button allows collapsing menu. button supposed appear menu expanded, click event isn't registered until second click of menu item, button doesn't appear. here top navigation menu's hover. on first touch on list item (:hover) works.
#nav li:hover { background-color:#80ccff; color:black; opacity:1; } #nav li:hover > ul.child { top:39px; display:inline; position:absolute; text-align:left;
}
here top of navigation html:
<ul id="nav"> <input id="button1" style="margin-bottom:10px;" class="button1class" name="button1" type="button" value="collapse menu" onclick="hidebutton();return false;"/> <li class="green"><a id="close" href="" onclick="showiframe(this.id); return false;">development</a>
and here snippet of javascript showiframe():
else { document.getelementbyid("theiframe").style.display = "none"; document.getelementbyid("button2").style.display = "none"; document.getelementbyid("button1").style.display = "block"; }
to summarize, onclick doesn't called until second click know how safari supposed work when sees :hover. want write code there no :hovers, works if there :hovers meaning menu expands needed, , onclick sensed on first click.
<ul id="nav"> <input id="button1" style="margin-bottom:10px;" class="button1class" name="button1" type="button" value="collapse menu" onclick="hidebutton();return false;"/> <li class="green"><a id="close" href="" onclick="showframe(this.id); return false;">development</a>
try code