jQuery悬停仅适用于主页（Chrome）
[英]jquery hover only works on home page (Chrome)
问题描述
Here is the site that I'm working on: test site 
这是我正在工作的站点： 测试站点
"Quotes" in the navigation has a submenu that appears on hover. 导航中的“行情”有一个子菜单，它显示在悬停上。 But once you scroll down the page, the submenu stops working right. 但是，当您向下滚动页面时，子菜单将停止正常工作。
Here's my jQuery code, only the first chunk pertains to the submenu but I'm including the rest in case you find a conflict: 这是我的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');
}
});
});
The html: 的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>
The CSS: 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;
}
Please help me figure out what the problem is. 请帮助我找出问题所在。 Thanks! 谢谢！
Edited: Not working right in Chrome, but works ok in Firefox and Safari. 编辑：在Chrome中无法正常工作，但在Firefox和Safari中可以正常工作。
2 个解决方案
解决方案1
1 已采纳 2014-08-10 17:03:26
After delete the main element, it works. 删除main元素后，它可以工作。
EDIT: 编辑：
The relationship between main and header is same level, so you should change your structure to: main和header之间的关系是同一级别，因此您应该将结构更改为：
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
解决方案2
0 2014-08-10 17:02:40
I recommend checking out this link: http://forum.jquery.com/topic/hover-not-working-for-chrome 我建议您查看以下链接： http : //forum.jquery.com/topic/hover-not-working-for-chrome
It appears that there are issues with the .hover function in jQuery for chrome. 看来chrome的.hover函数存在问题。 I believe your function 我相信你的职能
$("nav ul li").hover(
function(){
$('ul:first',this).css('visibility', 'visible');
}, function(){
$('ul:first',this).css('visibility', 'hidden');
});
still may be getting triggered since when you scroll, there are many different "ul li" throughout the page that you are default 'hovering' over such that this bit of code is called: $('ul:first',this).css('visibility', 'hidden'); 仍然可能会被触发，因为当您滚动时，整个页面中有许多不同的“ ul li”，您默认将它们“悬停”在上方，从而使这段代码称为：$（'ul：first'，this）.css （“可见性”，“隐藏”）； adding an id to the elements you need to access may inherently solve this issue. 向您需要访问的元素添加ID可以从本质上解决此问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.