我有一个奇怪的问题:
这个页面在桌面浏览器上看起来不错,但悬停效果似乎在我的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="#", 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>
答案是使用专用触摸事件,如3ror404在其评论中所述。(甚至不能为此奖励他!)
链接:在没有jQuery mobile的情况下在mobile上使用mousedown事件?
我有这样的CSS:
.icons:hover
{
background-color: #e0e0e0;
box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
}
并且它在HTC Evo 4g LTE上对我显示正确。
许多触摸设备上的悬停行为未定义或不可靠。你不应该期望它在触摸设备上工作。使用一些可供选择的设计模式。
也许在鼠标上用javascript(JQuery)触发链接会起作用:
$('.link').mousedown(function(){
$(this).addClass('pressed');
}).mouseup(function(){
var myURL = $(this).attr(href); /* retrieve URL from href attribute */
document.location.href=myURL;
});
显然,您需要在样式表