2

我有一个使用 webview 加载和显示 html 页面的 Android 应用程序。但是当一个新页面刚刚加载到 webview 中时，有时会有一个元素已经悬停。例如，id 为“imhovered”的元素已经悬停并且具有 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 准备好时，没有焦点或悬停的元素。

正文 onload 中的 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 回答