Question

我之前从未使用过jQuery，所以我请朋友帮我处理一些我正在处理的小项目，当你将鼠标悬停在按钮上时我想加载不同的图片，你可以在{{3}上看到它是如何工作的}。它适用于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>

有谁可以指出我做错了什么？

由于

Answer 1

你使用的CSS功能很奇怪......

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

以这种方式改变它：

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

等

Answer 2

你的图像必须加载，所以当你翻过它们时，图像加载时会出现一个小的“小故障”。

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

e：至少，这就是我如何解释你的问题。当你说他们“消失”时，你的意思是永久性的吗？

Answer 3

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

阅读此文章了解此http://css-tricks.com/css-sprites/

Answer 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代码。 logo是helment。 nav是按钮的div。左右是按钮

图像在Chrome和IE中消失

4 个答案: