如何让IE7在悬停时叠加另一个图像

时间：2013-02-14 15:53:21

标签： html css internet-explorer

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

任何提示？

编辑： 好吧，我严厉地提出了这个问题：我想悬停一个图像。在悬停时，它应位于下一个上方 现在，悬停的图像位于下一个图像的下方

1 个答案:

答案 0 :(得分：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

相关问题
最新问题