我试图让 IE 在鼠标悬停时覆盖图像
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
<title>Test</title>
<link href="logotestIE.css" rel="stylesheet" type="text/css">
</header>
<body>
<ul class="letterlist">
<li><img class="grayscale" src="http://mdsystem.com/image/new_start/logos/logo_anadolu.gif" /></li>
<li><img class="grayscale" src="http://mdsystem.com/image/new_start/logos/logo_aston_martin.gif" /></li>
</ul>
</body>
</html>
有什么提示吗？
编辑: 好吧，我提出的问题很糟糕:我想悬停图像。在悬停时它应该位于下一个之上 现在悬停的图像位于下一张图像的下方
最佳答案
最好的方法是创建一个 Sprite 。在任何照片/图像软件 (photoshop) 中，拍摄两张图像并将它们放在同一个文件中，一张放在另一张下面。
示例:
然后你创建一个元素，给它一个图像的背景，并定位它以仅显示你希望在悬停之前显示的图像。
HTML
<a href="#" id="button"> </a>
CSS
#button
{
width:191px;
height:151px;
text-decoration:none;
display:block;
background-image:url(dw-logo-sprite.jpg);
background-position:191px 0;
}
然后在元素上添加:hover，定位到下一张图片
#button:hover { background-position:0 0; }
jsFiddle:http://jsfiddle.net/mFwnQ/2/
关于html - 如何让 IE7 在悬停时覆盖另一个图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14878745/