2

私は奇妙な問題を抱えています:

このページはデスクトップ ブラウザでは問題なく表示されますが、少なくとも CM7 Android 2.3.7 デバイスではホバリング効果が正しく機能しないようです。マウスのようにホバリングがタッチ ディスプレイで機能しないことはわかっていますが、タッチ フィードバックが必要です。つまり、ユーザーがメニュー項目をタップすると、ハイライト色が表示されるはずです。

これは、リンクが単なる href="#" の場合は機能しますが、実際のリンクの場合は機能しません。ご覧のとおり、あらゆる種類のものを試しましたが、役に立ちませんでした。

実際のリンクをタップした後でブラウザの履歴をさかのぼると、アイテムが強調表示されるため、ブラウザは私が投げている CSS を理解します。

ただし、javascript アラートは、リンクを開くアクションのみを解釈しているように見え、色の変化は気にしないことを明確にしています。

それは奇妙です。回避策は歓迎しますが、JavaScript を使用しないことが望ましいですが、JS でなければならない場合は、先に進んでください。

ここにアクセスしてください: http://orpheus.co.at/hoverprob およびソースを使用してください、Luke! または、ここでそのすべての栄光をご覧ください。

<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 に答える