图像在 Chrome 和 IE 中消失答案

【问题标题】：Image disappears in Chrome and IE图像在 Chrome 和 IE 中消失
【发布时间】：2012-03-09 13:16:18
【问题描述】：

我以前从未使用过 jQuery，所以我请朋友帮我完成我正在做的一些小项目，我想在您将鼠标悬停在按钮上时加载不同的图片，您可以在 our site 上看到它是如何工作的。它适用于 FF 和 Opera，我也在 Chrome 中进行了测试，但是当我在本地机器上尝试它时效果很好，但是一旦我将它放在服务器上，Chrome 和 IE 中的图片就会开始消失更改按钮。这是我使用的代码：

<div id="wraper">
    <div id="nav">
        <div id="left">
            <script>
                $(document).ready(function() {
                    $('#left').hover(
                        function(){
                            $('#nav').css({'background-image' : 'url(img/serbia.png)'});
                        },
                        function(){
                            $('#nav').css({"backgroundImage" : "url(img/inactivebutton.png)"});
                        }
                    );
                });

                $(document).ready(function() {
                    $('#right').hover(
                        function(){
                            $('#nav').css({'background-image' : 'url(img/english.png)'});
                        },
                        function(){
                            $('#nav').css({"backgroundImage" : "url(img/inactivebutton.png)"});
                        }
                    );
                });
            </script>
            <a href="index_sr.html" ></a>
        </div>

        <div id="right">
            <a href="index_en.html" ></a>
        </div>
    </div>
</div>

谁能指出我做错了什么？

谢谢

【问题讨论】：

服务器错误日志中有什么内容？

标签： jquery css internet-explorer google-chrome

【解决方案1】：

Jquery 不是问题。这是很自然的过程，因为当您通过链接hover 时，它会向服务器发送一个新的其他HTTPS 请求。如果您为此使用 css sprite 图像，那就太好了。

阅读这篇文章了解这个http://css-tricks.com/css-sprites/

【讨论】：

【解决方案2】：

你正在使用奇怪的 CSS 函数...

看这里：http://api.jquery.com/css/

所以改成这样：

 $('#nav').css('background-image','url(img/serbia.png)');

等等

【讨论】：

当我输入时，dw 说有代码错误，它根本不起作用

【解决方案3】：

您的图像必须加载，因此当您在它们上滚动时，图像加载的位置会出现一个小“故障”。

尝试预加载图像，如下所述：http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

e：至少，我是这样解释你的问题的。当您说它们“消失”时，您的意思是永久吗？

【讨论】：

不，请你用chrome或ie去studiospartacus.com/index1.html，你会看到我在说什么
我也尝试将 backgroundImage 更改为 background-image，当我在本地测试它时它仍然有效，但很快我在服务器上测试它它的错误，当你更改按钮时，图片一直加载
是每次都需要重新加载的问题。交换图像需要时间，因为 JavaScript 不是即时的。尝试使用 CSS 而不是 JS 进行交换。
你能帮我如何使用css而不是jquery

【解决方案4】：

分开图片作为

leftActiveHelmet.png ----左头盔
rightActiveHelmet.png ----右头盔
inactiveHelmet.png ---非活动头盔
inactivebutton.png ---非活动按钮
leftActivebutton.png --活动左键

rightActivebutton.png ---活动右键

    <script>

    $(document).ready(function() {
    $('#left').hover(

   function(){
    $('#logo').css({"backgroundImage" : "url(img/leftActiveHelmet.png)"});
    $('#left').css({'background-image' : 'url(img/leftActivebutton.png)'});
    },
    function(){
    $('#logo').css({"backgroundImage" : "url(img/inactiveHelmet.png)"});
    $('#left').css({'background-image' : 'url(img/inactivebutton.png)'});
    }
    );

    $('#right').hover(
    function(){
    $('#logo').css({"backgroundImage" : "url(img/rightActiveHelmet.png)"});
    $('#left').css({'background-image' : 'url(img/rightactivebutton.png)'});
    },
    function(){
    $('#logo').css({"backgroundImage" : "url(img/inactiveHelmet.png)"});
    $('#right').css({'background-image' : 'url(img/inactivebutton.png)'});

    }
    );

});


</script>
<div id="logo"></div><div id="nav"><a id="left" href="index_sr.html" ></a><a id="right" href="index_en.html" ></a></div>

您也必须放置 CSS 代码。标志是舵。 nav 是按钮的 div。左右是按钮

【讨论】：