Fatal编程技术网
  • css/
  • Css Internet Explorer中鼠标悬停上的图像更改

Css Internet Explorer中鼠标悬停上的图像更改

css internet-explorer-8

Css Internet Explorer中鼠标悬停上的图像更改,css,internet-explorer-8,hover,Css,Internet Explorer 8,Hover,编辑晚上10:04我解决了这个问题 是的，我知道了，但是论坛软件在8小时后才允许我发布我自己问题的答案。不管怎样，我找到了解决办法。它使用纯HTML方法，我在所有5种浏览器中都成功地测试了它。只需输入HTML： 我正在尝试设置一个页面，最终在几个页面上显示以下内容： 1页面加载时会加载默认图像。 2当您将鼠标移到上方时，会加载一个稍有不同的图像。 3当你离开它时，它会回到原始图像 我认为这是一个简单的小CSS，它是，除非它涉及到Internet Explorer。这是我所拥有的，它只显示了我车上

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

是的，我知道了，但是论坛软件在8小时后才允许我发布我自己问题的答案。不管怎样，我找到了解决办法。它使用纯HTML方法，我在所有5种浏览器中都成功地测试了它。只需输入HTML：

我正在尝试设置一个页面，最终在几个页面上显示以下内容：

1页面加载时会加载默认图像。 2当您将鼠标移到上方时，会加载一个稍有不同的图像。 3当你离开它时，它会回到原始图像

我认为这是一个简单的小CSS，它是，除非它涉及到Internet Explorer。这是我所拥有的，它只显示了我车上坏了的起动机的两张照片：

<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中运行良好，但在InternetExplorer8中不起作用。事实上，在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>
我什么也得不到，在任何浏览器中都没有任何类型的图像。

您需要使用正确的语法。下面是正确的语法

元素{

背景：

#fff

url(image.png)

no-repeat

20px 100px

fixed;
}

注意这里没有双引号

如果您试图解决这些问题，请使用Firebug，Firebug是一个非常有用的工具，您也可以右键单击并检查元素。谢谢。我在上面做了一些编辑，因为这些评论框的格式很糟糕。如果你能把这个放到jsfiddle.net上，我可以看一看，让你知道你的错误在哪里。