jQuery、Internet Explorer 和导航选项卡答案

【问题标题】：jQuery, internet explorer and navigation tabsjQuery、Internet Explorer 和导航选项卡
【发布时间】：2013-06-21 11:22:21
【问题描述】：

我目前正在为一个网站制作一个导航。导航非常直接，带有选项卡式菜单。当您将鼠标悬停在每个选项卡上时，选项卡会从带白色文本的红色淡化到带红色文本的白色。当您移开鼠标时，它应该会从带有红色文本的白色按钮淡出到带有白色文本的红色按钮。我有所有的 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中的不透明问题吗？我不这么认为，否则它会起作用。呵呵。

我想要的是，当用户单击选项卡并将他们定向到下一页时，我不希望按钮内的文本消失，并且出于某种原因它会消失。即使我有 $('red-text').show();一页加载。

【问题讨论】：

我假设这些项目都在 HTML 中。你真的应该使用一个单一的类名或更简单的东西，然后打一个电话就可以完成所有工作。这比你真正需要的 .hover 多得多
该 jQuery 代码绝对可以重写以提高效率。在jsfiddle.net 上创建您的导航的小提琴

标签： jquery html opacity

【解决方案1】：

houstonla.wpengine.com

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

【讨论】：

【解决方案2】：

我同意，它绝对可以写得更有效率。但是对于概念证明等，这暂时有效。我正在尝试获得 IE 8 支持。它适用于所有浏览器，但 IE 8 没有第二个延迟，因为页面加载之前您可以单击 chrome 和 firefox 之类的链接。

【讨论】：