CSS hover behavior inconsistent on desktop/mobile devices

Question

I have a strange problem:

This page looks good on desktop browsers, but the hovering effect does not seem to work correctly on at least my CM7 Android 2.3.7 device. I know hovering is not supposed to work on touch displays as it does with a mouse, but I'd like to have touch feedback, i.e. the highlight color should show once the user has tapped a menu item.

This does work when the link is just a href="#" but it does not when it is a real link. I tried all sorts of stuff as you can see, to no avail.

If you go back in the browser history after having tapped a real link, the item is highlighted, so the browser understands the CSS I am throwing at it.

However, the javascript alert makes it clear that it only seems to interpret the link opening action and does not care about the color changing stuff.

Weird that is. Workarounds welcome, preferable without javascript, but if it has to be JS, then go ahead!

either go here: http://orpheus.co.at/hoverprob and Use the source, Luke! or see it here in all its glory:

<html>
<head>
    <meta name="viewport" content="width=320">
    <style>
        #nav, #nav ul {
    width: 100%;
    float: left;
    list-style: none;
    line-height: 1;
    background: #fff;
    font-weight: bold;
    padding: 0;
    margin: 0 0 5px 0;
}

#nav a {
    display: block;
    color: #001834;
    text-decoration: none;
    padding: 5px 7px;
}

#nav li {
    float: left;
    padding: 0;
    width: 33%;
}

#nav li ul {
    position: absolute;
    left: -9999px;
    height: auto;
    margin: 0;
    opacity: .95;
    width: 100%;
}

#nav li a {
    text-align: center;
    height: 20px;
    line-height: 20px;
}

#nav li ul li a {
    text-align: left;
}

#nav li ul li {
    float: none;
    /* width: 316px; */
    width: 100%;
}


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -9999px;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: 0;
}
#nav li.educate {
    background: #FFF0B8;
    /* background: #FF0000; */
    /* border-radius: 5px; */
    border: 5px;
}

#nav li.educate:hover {
    background: #FFCE00;
    /* border-radius: 5px; */
}
    </style>
</head>
<body>
<div id="mobMenu">
<ul id="nav" class="nav">
    <li class="educate"><a href="#">menu</a>
        <ul class="educate">
            <li class="educate"><a href="#">href=&quot#&quot;, works</a></li>
            <!--(+emtpy onmouseover for iPose devices)-->
            <li class="educate"><a onmouseover="" href="index.html">does not work, real link</a></li>
            <li class="educate" id="bla"><a onmousedown="document.getElementById('bla').style.backgroundColor='Blue'; alert('Done');document.location='index.html';" href="#">JS, not interpreted in corr order</a></li>
        </ul>
    </li>
</div>
</body>

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

The answer is to use dedicated touch events as 3rror404 notes in his comment. (Can't even reward him for that!)

Link: Using mousedown event on mobile without jQuery mobile?

edited May 23 '17 at 11:58

Community

1
1

answered Jul 10 '12 at 14:08

tbart

91
1
5

score 0 · Answer 2 · answered Jul 09 '12 at 20:38

0

I have CSS like this:

.icons:hover
{
    background-color: #e0e0e0;
    box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
}

and it displays correctly for me on HTC Evo 4g LTE.

answered Jul 09 '12 at 20:38

FoamyGuy

46,603
18
125
156

Android 2.3 (Gingerbread)'s browser is not capable of box-shadows. And the background-color thing is more or less what does not work for me (I used the "background" shorthand). Sorry. Seems to me you are on 4.x (Icecream Sandwich) already... – tbart Jul 10 '12 at 11:30

Turnip · Answer 3 · 2012-07-09T22:23:55.050

0

Perhaps triggering the link with javascript(JQuery) on mouse up would work:

   $('.link').mousedown(function(){
      $(this).addClass('pressed');
    }).mouseup(function(){
      var myURL = $(this).attr(href); /* retrieve URL from href attribute */
      document.location.href=myURL;
    });

obviously you would need to create the .pressed class in your style sheet

edited Jul 09 '12 at 22:23

answered Jul 09 '12 at 20:45

Turnip

35,836
15
89
111

sorry, does not work either... also added your suggestion to the test url: http://orpheus.co.at/hoverprob – tbart Jul 10 '12 at 12:50
1

Have you seen this thread? http://stackoverflow.com/questions/11144370/using-mousedown-event-on-mobile-without-jquery-mobile Not sure if it's useful or not... – Turnip Jul 10 '12 at 13:37

score 0 · Answer 4 · answered Jul 09 '12 at 21:36

0

The hover behavior on many touch devices is undefined or unreliable. You should not expect it to work on touch devices. Use some alternative design pattern.

answered Jul 09 '12 at 21:36

twaddington

11,607
5
35
46

Suggestions? I am glad I am able to work with pure CSS with this menu. What other options can you think of that make the user recognize (esp on slow links) that his tapping worked and s/he just needs to wait? JS apparently also does not work as per my example... – tbart Jul 10 '12 at 11:33
Many web browsers on touch devices already give the user an indication that they are tapping on a link or something clickable (like a button). If you're trying to show or hide a menu your best option would be to use Javascript. There are a few mobile web frameworks for touch based UI elements. You might take a look at jQuery mobile: http://jquerymobile.com/ – twaddington Jul 10 '12 at 18:19

CSS hover behavior inconsistent on desktop/mobile devices

4 Answers4