Home/ Questions/Q 7817151
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T06:08:16+00:00

I have an Android app using webview to load and display html pages. But

  • 0

I have an Android app using webview to load and display html pages.
But when a new page has just been loaded into the webview, there is sometimes a element which is already hovered. For example the element with id “imhovered” is already hovered and has the blue background of the div (see code below). This happens quite randomly depending on the element structure of the current page and the position of the touch from the user in the previous page.

html code:

<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>

and the styles:

.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;
}

My question is how to remove this wrong hovered state of the element ?
I have tried to find a solution for a while with researching and own experimenting but still have no success. Following are what i find out during my experiments:

webview.clearFocus() -> not work

javascript/jquery when dom is ready: 

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

this means that when the dom is ready, there is no focused or hovered element.

javascript/jquery in body onload (when page is loaded):

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

this means that the hovered state has just appeared now as the page has just been loaded. Is it now too late to do any style modification because the wrong hovered background is already displayed? Is it a bug of webkit/android? I hope you guys can give me any advice to solve this. Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    i finally find out that when the loading process is quick enough, user will not see the style modification, so i do the following style modification and it solves my problem:

    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;
}

    i hope this could help someone who has the same problem.

    • 0