Question

我目前正在为网站整理导航。导航非常简单，带有标签式菜单。当您将鼠标悬停在每个选项卡上时，该选项卡将从带有白色文本的红色淡化为带红色文本的白色。当您移除鼠标时，它应该从带有红色文本的白色按钮淡化为带有白色文本的红色按钮。我有所有jQuery编写和工作。主要问题在于Internet Explorer。这让我发疯了！

   $(document).ready(function(){
                $('.button-text').fadeIn();
                $('.red-text').hide();
                $('.red-text2').hide();
                $('.red-text3').hide();
                $('.red-text4').hide();
                $('.red-text5').hide();
                    <!-- toggle visibility of red text on hover -->
                    $('.white-hover-nav-button').hover(function(){
                        $('.red-text').fadeIn('fast');
                    });
                    $('.white-hover-nav-button').mouseleave(function(){
                        $('.red-text').hide();
                    });
                    $('.white-hover-nav-button2').hover(function(){
                        $('.red-text2').fadeIn('fast');
                    });
                    $('.white-hover-nav-button2').mouseleave(function(){
                        $('.red-text2').hide();
                    });
                    $('.white-hover-nav-button3').hover(function(){
                        $('.red-text3').fadeIn('fast');
                    });
                    $('.white-hover-nav-button3').mouseleave(function(){
                        $('.red-text3').hide();
                    });
                    $('.white-hover-nav-button4').hover(function(){
                        $('.red-text4').fadeIn('fast');
                    });
                    $('.white-hover-nav-button4').mouseleave(function(){
                        $('.red-text4').hide();
                    });
                    $('.white-hover-nav-button5').hover(function(){
                        $('.red-text5').fadeIn('fast');
                    });
                    $('.white-hover-nav-button5').mouseleave(function(){
                        $('.red-text5').hide();
                    });         
            });

白色标签是.white-hover-nav-button，文字为红色文字。

在Internet Explorer内部，用户点击链接，页面也会发生变化。如果用户在页面更改时根本没有移动鼠标，则会再次出现白色按钮，但除非您将鼠标从按钮上移开然后重新打开，否则其中没有文本。有没有人知道为什么会这样做？我一直试图弄清楚整个周末，因为我继续建立我的网站。它在FF和Chrome中运行得很好，但是IE像往常一样大失败。

这太可怕了。显然它应该工作。它是IE中的不透明问题吗？我不这么认为，否则它会起作用。 WTF。

所有我想要的是当用户点击标签并将它们定向到下一页时，我不希望按钮内的文本消失，并且由于某种原因它确实消失了。甚至我有$（'red-text'）。show（）;一页加载。

Answer 1

我同意，它绝对可以更有效地编写。但是为了概念证明等，这暂时适用。我很想得到IE 8的支持。它适用于所有浏览器，但IE 8在页面加载之前没有第二个滞后，你可以点击chrome和firefox这样的链接。

Answer 2

houstonla.wpengine.com

如果您在IE 8中查看它，然后单击导航中的选项卡，您将看到文本消失，按钮只保持白色。这很奇怪。我似乎无法弄清楚为什么这样做。

jQuery，Internet Explorer和导航选项卡

2 个答案: