2

HTMLページを読み込んで表示するためにwebviewを使用するAndroidアプリがあります。しかし、新しいページが webview にロードされたばかりの場合、すでにホバーされている要素が存在することがあります。たとえば、「imhovered」という ID を持つ要素はすでにホバーされており、div の背景が青色になっています (以下のコードを参照)。これは、現在のページの要素構造と、前のページでユーザーがタッチした位置に応じて、かなりランダムに発生します。

html コード:

<body>
<a href="link1" class="menu">
    <div  class="qlink">here is div1</div>
</a>
<a href="link2" class="menu">
    <div  class="qlink"> here is div2 </div>
</a>
<a  id="imhovered" href="link3" class="menu">
    <div class="qlink">here is div3</div>
</a>            
</body>

およびスタイル:

.menu {
    color: red;
    text-decoration:none;
    font-family:sans-serif;
    font-size: 28px;
}
.menu:hover {
    color: red;
    background-color: green;
}

.qlink {
    padding-left: 84px;
    padding-top: 24px;
    padding-bottom: 20px;
    background: url(aaa.png) no-repeat scroll 28px 0px;
}
.qlink:hover {
    background-color:blue;
}

私の質問は、要素のこの間違ったホバー状態を削除する方法ですか? 私はしばらくの間、調査と独自の実験で解決策を見つけようとしましたが、まだ成功していません. 以下は、実験中に私が見つけたものです。

webview.clearFocus() -> 動作しません

DOM の準備ができたら、javascript/jquery:

$(document).ready(function () {
    alert($("*:hover").attr("id"));--> result:undefined
    alert($("*:active").attr("id")); --> result:undefined
    alert($("*:focus").attr("id")); --> result:undefined
});

これは、DOM の準備が整ったときに、フォーカスされた要素やホバーされた要素がないことを意味します。

本文のオンロードでの javascript/jquery (ページのロード時):

alert($("*:hover").attr("id")); --> result:imhovered
alert($("*:active").attr("id")); --> result:undefined
alert($("*:focus").attr("id")); --> result:undefined

これは、ページが読み込まれた直後にホバー状態が表示されたことを意味します。間違ったホバー背景が既に表示されているため、スタイルの変更を行うには遅すぎますか? webkit/androidのバグですか？これを解決するためのアドバイスをいただければ幸いです。前もって感謝します！

4

1 に答える 1

1

読み込みプロセスが十分に速い場合、ユーザーにはスタイルの変更が表示されないことがようやくわかりました。次のスタイルの変更を行うと、問題が解決します。

window.onload = 
    function() {
        var imhovered = $("*:hover");
        var children = imhovered.children();
        children.removeClass("qlink").addClass("qlinkNoHover");
        imhovered.bind('touchstart touchend', function() {
        $(this).children().toggleClass('qlinkFixHovered');
    });
}

.qlinkNoHover {
    background-color:transparent;
    padding-left: 84px;
    padding-top: 24px;
    padding-bottom: 20px;
    background: url(aaa.png) no-repeat scroll 28px 0px;
}

.qlinkFixHovered {
    background-color:blue !important;
}

これが同じ問題を抱えている人に役立つことを願っています。

于 2012-04-17T09:56:48.513 に答える