Question

我有一个奇怪的问题：

此页面在桌面浏览器上看起来很不错，但至少在我的CM7 Android 2.3.7设备上，悬停效果似乎无法正常工作。我知道悬停不应该像在鼠标上那样在触摸显示器上工作，但是我想要有触摸反馈，即一旦用户点击菜单项就会显示高亮颜色。

当链接只是一个href =“＃”时，这确实有效，但当它是真正的链接时却没有。我尝试了各种各样的东西，但没有用。

如果您在点击真实链接后返回浏览器历史记录，该项目会突出显示，因此浏览器会理解我正在投掷的CSS。

然而，javascript警告清楚地表明它似乎只是解释了链接打开动作而不关心颜色变化的东西。

很奇怪。欢迎解决方法，最好没有javascript，但如果必须是JS，那么请继续！

要么去这里： http://orpheus.co.at/hoverprob 并使用来源，卢克！或者在这里看到它的所有荣耀：

<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>

Answer 1

答案是在他的评论中使用专门的触摸事件作为3rror404注释。（甚至不能奖励他！）

链接： Using mousedown event on mobile without jQuery mobile?

Answer 2

我有这样的CSS：

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

它在HTC Evo 4g LTE上正确显示。

Answer 3

在鼠标上启动时触发与javascript（JQuery）的链接可能会起作用：

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

显然你需要在样式表中创建.pressed类

Answer 4

许多触控设备上的悬停行为未定义或不可靠。你不应该期望它适用于触控设备。使用一些替代设计模式。

CSS悬停行为在桌面/移动设备上不一致

4 个答案: