0

ホームページの場合、画像スプライトで表される4つのリンクを含むhtmlファイルがあります。スプライトは正しく表示され、ホバーすると変化します。デスクトップでhtmlファイルを使用するだけでコードをテストすると、ホバープロパティは正常に機能しますが（IE8でも）、SharePointサイトに実装すると、のマウスアウト部分が:hover認識されません。何らかの理由で、画像が希望どおりに元の状態に戻らない。このコードは、Firefoxを使用してSharePointを起動したときに機能し、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>

お時間をいただきありがとうございます、

4

1 に答える 1

1

normalと:hover状態の両方の背景に同じ画像を使用する必要はありません。background-position代わりに設定してください。

#four a:hover { background-position: 0px -382px; }
于 2012-07-24T18:12:08.557 に答える