jquery hover only works on home page (Chrome)
Question
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:
$(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:
<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:
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.
2 answers
solution1
1 ACCPTED 2014-08-10 17:03:26
After delete the main element, it works.
EDIT:
The relationship between main and header is same level, so you should change your structure to:
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
solution2
0 2014-08-10 17:02:40
I recommend checking out this link: http://forum.jquery.com/topic/hover-not-working-for-chrome
It appears that there are issues with the .hover function in jQuery for chrome. 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'); adding an id to the elements you need to access may inherently solve this issue.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.