How to reset (undo) a: positioner

In the HTML below, there are three <style> blocks. The second block is the unwanted one, which makes the image disappears when mouse hover. The first two blocks are un-editable. We have to use the third block to cancel out the effect of the second block. Given an example of the third block below, but that does NOT work.

<!DOCTYPE html>
<html>
<head>

<style>
a {
  display: inline-block; width: 280px; height: 32px;
  background-image: url('http://www.w3schools.com/images/w3logotest2.png');
}
</style>

<style>
/* some bad guy did this */
a:hover {
  background-image: none;
}
</style>

<style>
/* to revert what the bad guy did */
/* but this is NOT work! */
a:hover {
  background-image: inherit !important;
}
</style>

</head>

<body>
<a href="http://www.w3schools.com/"></a>
</body>

</html>

Thanks very much for you inputs.


Note that, (sorry, i didn't make it clear enough), this is just an example. In the real case, there are many <a> with the first block setting them to different images. Just Only One second block ruins them all. As there are many (unlimited in fact, as it is a dynamic page) <a>, it is impossible to handle them one by one. I wish to have only one third block, that can revert the effect of the evil second block. Thanks a lot.


write:

<style>
    a:hover {
        background-image: url('http://www.w3schools.com/images/w3logotest2.png');
    }
</style>