I have a strange problem:
This page looks good on desktop browsers, but the hovering effect At least on my CM7 Android 2.3.7 device does not seem to work properly I know that the rotator is not supposed to work on touch display as it does with the mouse, but I have to do touch feedback Highlight color, after the user taps the menu item Should be eaten.
This works when the link is only an href = "#", but it does not happen when it is a real link I tried all kinds of things, as you can see, no avail.
If you go back to the browser history after tapping on a real link, the item is highlighted, so the browser understands CSS.
However, JavaScript Alert makes it clear that it only explains the action of opening the link and does not care about changing colors.
Workaround is better without Javascript, you are welcome, but if it has to be JS, then go ahead!
Either go here: and use the source, Luke! Or see it in all its glory:
& lt; Html & gt; & Lt; Top & gt; & Lt; Meta name = "viewport" content = "width = 320" & gt; & Lt; Style & gt; #nav, #nav ul {width: 100%; Swim left; List style: none; Line-height: 1; Background: #fff; font-weight: bold; Padding: 0; Margin: 0 to 5px 0; } # Navs a {display: block; Color: # 001834; Text-decoration: None; Padding: 5px 7px; } # Nav li {float: left; Padding: 0; Width: 33%; } # Nav li ul {condition: full; Left: -9999px; Height: auto; Margin: 0; Opacity: .95; Width: 100%; } #hh li {text-align: center; Height: 20px; Line-height: 20px; } # Nav li ul li {text-align: left; } #nav li ul li {float: none; / * Width: 316 px; * / Width: 100%; } # NAV Lee: Hover ul ul, # NAV Lee: Hover ul ul ul, # NAV LeSoffor UL UL, # NAV Lee. Sophor ul ul ul (left: -9999px; } #nav li: #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul ul hover, {left: ul hover, #nav li li: ul hover, #nav Li Li Li: 0; } # Nav li.educate {background: #fff0b8; / * Background: # FF0000; * / / * Boundary-radius: 5px; * / Border: 5px; } #nav li.educate: hover {background: #ffxex; / * Limit-Radius: 5px; * /} & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "mobMenu" & gt; & Lt; Ul id = "nav" class = "nav" & gt; & Lt; Li class = "educated" & gt; & Lt; A href = "#" & gt; Menu & lt; / A & gt; & Lt; Ul class = "educated" & gt; & Lt; Li class = "educated" & gt; & Lt; A href = "#" & gt; Href = & amp; Quot # and amp; Quot ;, works & lt; / A & gt; & Lt; / Li & gt; & Lt ;! - (+ Empty onmouseover for IPOS devices) - & gt; & Lt; Li class = "educated" & gt; & Lt; A onmouseover = "" href = "index.html" & gt; Does not work, real link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "educated" id = "bla" & gt; & Lt; A onmousedown = "document.getElementById ('bla') style.backgroundColor = 'Blue'; Alert ('full'); document.location = 'index.html'," Href = "#" & gt; JS, not interpreted in the order of the core & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Div & gt; & Lt; / Body & gt;
Answer is to use dedicated touch events as 3rror404 notes in the form of notes . (Can not even reward him for this!)
link:
Comments
Post a Comment