1

编辑 10:04 PM 我解决了这个问题

是的，我想通了，但是这里的论坛软件直到 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 已阻止此网站显示存在安全证书错误的内容。” 我一打开（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 回答