我有一个使用 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 准备就绪时，没有焦点元素或悬停元素。
正文加载中的 javascript/jquery(加载页面时):
alert($("*:hover").attr("id")); --> result:imhovered
alert($("*:active").attr("id")); --> result:undefined
alert($("*:focus").attr("id")); --> result:undefined
这意味着悬停状态现在刚刚出现，因为页面刚刚加载。因为已经显示了错误的悬停背景，现在进行任何样式修改是否为时已晚？是webkit/android的bug吗？我希望你们能给我任何建议来解决这个问题。提前致谢!
最佳答案
我终于发现当加载过程足够快时，用户将看不到样式修改，所以我做了以下样式修改并解决了我的问题:
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;
}
我希望这可以帮助有同样问题的人。
关于Android Webview 如何在加载时删除元素的聚焦/悬停状态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10103178/