0

我试图让 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>

http://jsfiddle.net/mFwnQ/

有什么提示吗？

编辑：好的，我提出的问题很糟糕：我想悬停图像。悬停时，它现在应该位于下一个图像的顶部，悬停的图像位于下一个图像的下方

4

1 回答 1

2

最好的方法是创建一个精灵。在任何照片/图像软件（photoshop）中拍摄两张图像并将它们放在同一个文件中，一个在另一个之下。

例子：

http://davidwalsh.name/demo/sprites/dw-logo-sprite.jpg

然后您创建一个元素，并为其提供图像背景，并将其定位为仅显示您希望在悬停之前显示的图像。

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/

来源：http ://davidwalsh.name/css-sprites

于 2013-02-14T16:00:54.727 回答