jQuery悬停仅适用于主页（Chrome）

Question

这是我正在工作的站点：测试站点

导航中的“行情”有一个子菜单，它显示在悬停上。 但是，当您向下滚动页面时，子菜单将停止正常工作。

这是我的jQuery代码，只有第一个块属于该子菜单，但是如果您发现冲突，我将包括其余部分：

$(document).ready(function(){

    // Dropdown Submenu

    $(function(){

        $("nav ul li").hover(
            function(){
                $('ul:first',this).css('visibility', 'visible');            
        },  function(){     
                $('ul:first',this).css('visibility', 'hidden');

        });

    });

    // Smooth Scroll

    $('a[href*=#]').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top}, 1000);
            return false;
    });

    // Header Shadow

    $(window).scroll(function(){
    var a = 5;
    var pos = $(window).scrollTop();
    if(pos > a) {
        $('header').addClass('bottom-shadow');
    }
    else {
        $('header').removeClass('bottom-shadow');
    }
    });


});

的HTML：

<nav>..
    <ul>
        <li> <a href="#services">Services</a> </li>
        <li> <a href="#providers">Providers</a> </li>  
        <li> <a href="#plans">Plans</a> </li>                  
        <li> <a href="#quotes">Quotes</a> 
            <ul>
                <li><a href="#indiv">Individual / Family</a></li>
                <li><a href="#group">Business / Group</a></li>
            </ul>
        </li>
        <li> <a href="#about">About</a></li>
        <li> <a href="#contact">Contact</a> </li>                    
    </ul>                     
</nav>

CSS：

nav ul{
  list-style-type: none;
  margin-top: 22px;
  padding: 0;
  float: right;
  position: relative;
}
nav ul li{
  float: left;
  zoom: 1;
}
nav ul li a{
  display: block;
  text-decoration: none;
  line-height: 20px;
  padding: 10px 16px;
  font-size: 17px;
  color: #304F70;
}
nav ul ul{ 
  width: 180px; 
  visibility: hidden; 
  position: absolute; 
  top: 16px; 
  left: 270px; 
}
nav ul ul li{   
  font-weight: normal; 
  background: url(../images/white_texture_bg.jpg), repeat, #FFF;
  color: #000; 
  border-bottom: 1px dotted #B4AFAB; 
  float: none; 
}
nav ul ul li:last-child{
  border-bottom: none;
}             
nav ul ul li a{ 
  border-right: none; 
  width: 100%; 
  display: inline-block; 
  text-align: left;
}

请帮助我找出问题所在。 谢谢！

编辑：在Chrome中无法正常工作，但在Firefox和Safari中可以正常工作。

Answer 1

删除main元素后，它可以工作。

编辑：

main和header之间的关系是同一级别，因此您应该将结构更改为：

<body>
  <header>
  </header>
  <main>
  </main>
  <footer>
  </footer>
</body>

Answer 2

我建议您查看以下链接： http : //forum.jquery.com/topic/hover-not-working-for-chrome

看来chrome的.hover函数存在问题。 我相信你的职能

  $("nav ul li").hover(
        function(){
            $('ul:first',this).css('visibility', 'visible');            
    },  function(){     
            $('ul:first',this).css('visibility', 'hidden');

    });

仍然可能会被触发，因为当您滚动时，整个页面中有许多不同的“ ul li”，您默认将它们“悬停”在上方，从而使这段代码称为：$（'ul：first'，this）.css （“可见性”，“隐藏”）； 向您需要访问的元素添加ID可以从本质上解决此问题。

jQuery悬停仅适用于主页（Chrome）

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-08-10 17:03:26

解决方案2
0 2014-08-10 17:02:40

jQuery悬停仅适用于主页（Chrome）

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-08-10 17:03:26

解决方案2 0 2014-08-10 17:02:40

解决方案1
1 已采纳 2014-08-10 17:03:26

解决方案2
0 2014-08-10 17:02:40