2

我有一个奇怪的问题：

此页面在桌面浏览器上看起来不错，但至少在我的 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>
4

4 回答 4

1

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

链接： 在没有 jQuery mobile 的移动设备上使用 mousedown 事件？

于 2012-07-10T14:08:41.633 回答
0

我有这样的CSS：

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

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

于 2012-07-09T20:38:11.150 回答
0

也许在鼠标上触发与 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 类

于 2012-07-09T20:45:12.960 回答
0

许多触摸设备上的悬停行为未定义或不可靠。您不应该期望它可以在触摸设备上工作。使用一些替代设计模式。

于 2012-07-09T21:36:33.277 回答