CSS懸停行爲對桌面/移動設備

本頁面看起來在桌面瀏覽器不錯，但徘徊效果似乎並不至少我的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>

來源

2012-07-09 tbart

答案是在他的評論中使用專用的觸摸事件作爲3rror404筆記。（甚至不能獎勵他爲！）

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

來源

2012-07-10 14:08:41 tbart

我的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-09 20:38:11 FoamyGuy

的Android 2.3（薑餅）的瀏覽器不能夠箱陰影。背景顏色的東西或多或少不適合我（我使用「背景」速記）。抱歉。在我看來，你已經在4.x（冰淇淋三明治）已經... – tbart 2012-07-10 11:30:40

加入你的建議，以測試網址： http://orpheus.co.at/hoverprob – tbart 2012-07-10 12:49:08

或許觸發了鼠標使用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-09 20:45:12 Turnip

對不起，也不工作... 還在測試網址中添加了您的建議： http://orpheus.co.at/hoverprob – tbart 2012-07-10 12:50:30

你見過這個線程嗎？ http://stackoverflow.com/questions/11144370/using-mousedown-event-on-mobile-without-jquery-mobile不知道它是否有用或不... – Turnip 2012-07-10 13:37:11

謝謝，解決了它！ – tbart 2012-07-10 14:01:40

許多觸摸懸停行爲設備不確定或不可靠。你不應該指望它在觸摸設備上工作。使用一些替代設計模式。

來源

2012-07-09 21:36:33 twaddington

建議？我很高興能夠使用這個菜單使用純CSS。你認爲還有什麼其他的選擇可以讓用戶認識到（特別是慢速鏈接）他的竊聽工作和他/她只需要等待？ JS顯然也沒有按照我的例子工作... – tbart 2012-07-10 11:33:46

觸控設備上的許多網頁瀏覽器已經向用戶指示他們正在點擊某個鏈接或某些可點擊的內容（如按鈕）。如果你想顯示或隱藏菜單，最好的選擇是使用Javascript。有一些基於觸摸的UI元素的移動Web框架。你可以看看jQuery手機：http：//jquerymobile.com/ – twaddington 2012-07-10 18:19:24

CSS懸停行爲對桌面/移動設備

回答

相關問題