What's Causing Flashing Nav Links?

HTML & CSS
1

Hello.

I can’t for the life of me figure out why the main nav links to this site are flashing and even disappearing somewhat when you roll your mouse over them.

Thanks

2

Hi,

It’s because you have applied a hover effect in js here:


// navigation hover fades code
	$('nav ul li').hover(function() {
		$(this).addClass('currentNavSelection a:hover').hide().fadeIn('slow');
	}, function() {
		$(this).removeClass('currentNavSelection a:hover');
	});

You are hiding the items when hovered and then fading them back in slowly so the effect is that the item disappears and then slowly fades in. If you roll over a few items quickly you hide the items before the next one can fade in and you get a queue of effects. You should probably stop all the other animations on the menu when you hover over an item.

It’s an awful effect anyway so why not just hover with css:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul.nav {
	margin:0;
	padding:0;
	list-style:none;
}
.nav li {
	float:left;
	margin:0 20px;
}
.nav a {
	color: #0175FE;
	text-decoration: none;
	-moz-transition:all .5s ease;
	-webkit-transition:all .5s ease;
	transition:all .5s ease;
}
.nav a:hover{color:red}
</style>
</head>

<body>
<nav><!-- begin mainNav -->
		
		<ul class="nav">
				<!-- begin mainNavList -->
				<li><a href="blue82.html">blue 82</a></li>
				<li><a href="wines.html">wines</a></li>
				<li><a href="beers.html">beers</a></li>
				<li><a href="food.html">food</a></li>
				<li><a href="index.html">home</a></li>
		</ul>
</nav>
</body>
</html>