1

午後 10 時 04 分編集これを解決しました

ええ、私はこれを理解しましたが、ここのフォーラム ソフトウェアでは、8 時間が経過するまで自分の質問への回答を投稿できません。とにかく、ここで解決策を見つけました。純粋な HTML アプローチを使用しており、5 つのブラウザーすべてで正常にテストされました。HTMLに入れるだけでした： <img src="starter1.jpg" onmouseover="this.src='starter2.jpg'" onmouseout="this.src='starter1.jpg'" />

これを特徴とするページ（最終的にはいくつかのページ）を設定しようとしています：

1) ページの読み込み時にデフォルトの画像が読み込まれます。2) マウスオーバーすると、わずかに異なる画像が読み込まれます。3) そこから離れると元の画像に戻ります。

少しの CSS でこれは簡単だと思いましたが、Internet Explorer の場合を除いてはそうです。これが私が持っているものです（私の車の壊れたスターターの写真が2枚だけ表示されています）：

<html>
    <head>
        <style>
            #pic1
            {
                width:500px;
                height:500px;
                background:url("starter1.jpg")no-repeat;
            }
            #pic1:hover
            {
                background:url("starter2.jpg")no-repeat;
            }

        </style>
    </head>
    <body>
        <div id="pic1"></div>
    </body>
</html>

Firefox、Chrome、Safari、Opera では正常に動作しますが、Internet Explorer 8 では動作しません。実際、IE8 ではどちらの画像も読み込まれません。空白の白い画面が表示されます。詳細がありませんか？これをすべてのブラウザで動作させる方法はありますか? アンカータグでラップすることについて何かを読みましたが、それも何もしませんでした。

編集：

コードがひどく見えない限り、投稿にコメントすることはできないようです。私はこれを試しました：

<html>
<head>
    <style>
        #pic1
        {
            width: 500px;
            height: 500px;
            background:url(starter1.jpg);
            no-repeat;
        }
        #pic1:hover
        {
            width: 500px;
            height: 500px;
            background:url(starter1.jpg);
            no-repeat;
        }
    </style>
</head>
<body>
    <div id="pic1"></div>
</body>
 </html>

最初の画像は表示されますが、ホバー オーバー画像は表示されません。IE は、「セキュリティを保護するために、Internet Explorer は、この Web サイトのコンテンツをセキュリティ証明書エラーで表示することをブロックしました」と繰り返し言います。開くとすぐに (IE、写真のあるページに移動する前)、安全に配信されたコンテンツのみを表示するかどうかを尋ねられます。私はいつも「いいえ」としか言いません。

最後に、これを試してみると：

<html>
<head>
    <style>
    #pic1
    {
          background: #FFFFFF url(starter1.jpg) no-repeat fixed center;
    }
    #pic1:hover
    {
          background: #FFFFFF url(starter2.jpg) no-repeat fixed center;
    }
    </style>
</head>
<body>
    <div id="pic1"></div>
</body>

どのブラウザでも、どのような種類の画像も表示されません。

4

1 に答える 1

0

適切な構文を使用する必要があります。適切な構文は次のとおりです。

エレメント {

バックグラウンド：

#fff

url(image.png)

no-repeat

20px 100px

fixed;

}

二重引用符 ("") がないことに注意してください。

于 2013-10-01T23:48:05.857 に答える