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

これを行う最善の方法は、スプライトを作成することです。写真/画像ソフトウェア (フォトショップ) では、両方の画像を取得し、同じファイル内に上下に配置します。

例：

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 に答える