Home/ Questions/Q 8309453
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T19:07:21+00:00

For a homepage i have an html file which contains four links represented by

  • 0

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,

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There’s no need to use same image for background for both normal and :hover states.
    Just set background-position instead.

    #four a:hover { background-position: 0px -382px; }
    • 0