jquery悬停只适用于首页(Chrome)

jquery hover only works on home page (Chrome)

本文关键字：Chrome 首页 适用于 悬停 jquery      更新时间：2023-09-26

这是我正在工作的网站:测试网站

导航栏中的"Quotes"有一个子菜单，在悬停时显示。但是一旦你向下滚动页面，子菜单就停止工作了。

这是我的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中可以正常工作

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

编辑:

main和header之间的关系是相同的，所以你应该改变你的结构为:

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

我推荐查看这个链接:http://forum.jquery.com/topic/hover-not-working-for-chrome

似乎有问题与。hover功能在chrome的jQuery。我相信你的功能

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

仍然可能被触发，因为当你滚动，有许多不同的"ul li"在整个页面，你默认'悬停'在这样的代码位被称为:$('ul:first'，this).css('visibility'， 'hidden');向需要访问的元素添加id可能从本质上解决这个问题。

相关文章：