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