对于主页，我有一个 html 文件，其中包含四个由图像 Sprite 表示的链接。 Sprite 显示正确并在悬停时发生变化，并且在我的桌面上仅使用 html 文件测试代码时，悬停属性工作正常(即使在 ie8 中)，但是在我的共享点网站上实现它时 的 mouseout 部分:hover 由于某种原因无法识别，并且图像不会按需要变回其原始状态。当我使用 firefox 调出共享点时，这段代码会起作用，甚至会在 ie8 中起作用，但只有当我调出 ie 的开发人员工具并切换 Browser Mode:IE8 和 Document Mode:IE8 Standards。
如何让我的图片在悬停状态下恢复到原来的状态？
这是我的引用代码:
<!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>
谢谢你的时间，
最佳答案
对于 normal 和 :hover 状态，不需要使用相同的背景图片。
只需设置 background-position 即可。
#four a:hover { background-position: 0px -382px; }
关于html - CSS 伪类 :hover in content editor webpart does not function correctly in ie8/ie7，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11636728/