<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Tabs</title>
<style type="text/css" media="screen">
<!--
BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
H1 { margin-bottom: 2px; font-family: Garamond, "Times New Roman", Times, Serif;}
DIV.container { margin: auto; width: 90%; margin-bottom: 10px;}
TEXTAREA { width: 80%;}
FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }
LEGEND { color: #ccc; font-size: 120%; }
INPUT, TEXTAREA { font-family: Arial, verdana; font-size: 125%; padding: 7px; border: 1px solid #999; }
LABEL { display: block; margin-top: 10px; }
IMG { margin: 5px; }
UL.tabNavigation {
list-style: none;
margin: 0;
padding: 0;
}
UL.tabNavigation LI {
display: inline;
}
UL.tabNavigation LI A {
padding: 3px 5px;
background-color: #ccc;
color: #000;
text-decoration: none;
}
UL.tabNavigation LI A.selected,
UL.tabNavigation LI A:hover {
background-color: #333;
color: #fff;
padding-top: 7px;
}
UL.tabNavigation LI A:focus {
outline: 0;
}
div.tabs > div {
padding: 5px;
margin-top: 3px;
border: 5px solid #333;
}
div.tabs > div h2 {
margin-top: 0;
}
.content { width:40%;}
}
-->
</style>
<script src="jquery152.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
var tabContainers = $('div.tabs > div');
tabContainers.hide();
$('div.tabs ul.tabNavigation a').mouseover(function ()
{
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
})
$('.content').mouseleave(function ()
{
tabContainers.hide();
$('div.tabs ul.tabNavigation a').removeClass('selected');
return false;
})
});
</script>
</head>
<body id="page">
<BR>
<HR>
<BR>
<div class="tabs">
<ul class="tabNavigation">
<li><a href="#first">Get Involved</a></li>
<li><a href="#second">Services</a></li>
<li><a href="#third">Other Stuff</a></li>
</ul>
<div id="first" class="content">
<h2>First</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="second" class="content">
<h2>Second</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="third" class="content">
<h2>Third</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
The above code works just fine in certain circumstances. The tabs show up as they should when mouseover the anchors but, when moving the mouse off the 'content' div then the 'content' div only gets hidden if the mouse moves downwards off the div or over to the right.
What do I have to do to make it work when the mouse is moved upwards too?
Thanks,
I don't know how to fix your problem using your existing markup, but I do know why you have the bug. The content actually does disappear when you mouse out the top of the window. The problem is that it is then immediately reshown because the tabs are right there. Because you are monitoring the mouseleave event on the content area, subsequently mousing up above the tabs doesn't rehide it. Your existing markup doesn't allow you to handle this in another elegant way. I would restructure your html so that the container for the tabs and the content are in a single element. Then monitor the mouseleave event for this element instead.
Here, try this. http://jsfiddle.net/wdeZx/
I made a container around your content with class container. I then added this to them mouseleave event tracking.