CSS pseudo class :hover in content editor webpart does not function correctly in ie8/ie7
===

For a homepage i have an html file which contains four links represented by image sprites. The sprites display correctly and change on hover, and when testing the code on just using an html file on my desktop the hover property works fine (even in ie8), but upon implementing it on my sharepoint site the mouseout part of the `:hover` is not recognized for some reason and the images do not change back to their original state as desired.  This code will work when I bring up sharepoint using firefox and will even work in ie8 but only when I bring up ie's developer tools and switch `Browser Mode:IE8 ` and `Document Mode:IE8 Standards`.  

How can I make my images go back to the original state when not being hovered? 

Here is my code para referencia:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">
    #navlist{position:relative;}
    #navlist li{margin:0;padding:0;list-style:none;position:absolute;}
    #navlist li, #navlist a{height:50px;display:block;}



    #one{left:0px;width:250px;}
    #one{background:url('images/newMenuSprite.png') 0px -1px;}
    #one a:hover{background: url('images/newMenuSprite.png') 0px -226px;}

    #two{left:0px;width:250px;top:54px}
    #two{background:url('images/newMenuSprite.png') 0px -53px;}
    #two a:hover{background: url('images/newMenuSprite.png') 0px -278px;}

    #three{left:0px;width:250px;top:108px}
    #three{background:url('images/newMenuSprite.png') 0px -105px;}
    #three a:hover{background: url('images/newMenuSprite.png') 0px -330px;}

    #four{left:0px;width:250px;top:162px}
    #four{background:url('images/newMenuSprite.png') 0px -157px;}
    #four a:hover{background: url('images/newMenuSprite.png') 0px -382px;}

    </style>


    </head>

    <body>

    <ul id="navlist" style="top:100px">
    <li id="one"><a href="h.html"></a></li>
    <li id="two"><a href="t.html"></a></li>
    <li id="three"><a href="m.html"></a></li>
    <li id="four"><a href="l.html"></a></li>
    </ul>

    </body>

    </html>




Thank you for your time,