It's up to you to make the #menu2 element invisible when the page loads.
You *could* do this by adding this code inside your ready function, and
outside the hover code:
$('#menu2').hide();
However, it would be much better to do it with CSS, to avoid the chance of
the element being displayed temporarily before the document ready code
executes.
You could do it with this CSS rule:
#menu2 { display:none; }
Or with a style on the element itself:
<div id="menu2" style="display:none;">...</div>
-Mike
_____
From: David Blomstrom
I recently modified my JQuery code to create an element that opens when
someone mouses over it. It should be closed by default.
It works, with one small problem. When you first load the page the element
opens. It doesn't close unless you mouse over it. Is there some way to fix
it so that the element remains closed until a user opens it?
Below is my code. Thanks.
* * * * *
<script src="'.$BaseURL.'/1A/js/jquery-1.2.6.min.js"
type="text/javascript"></script>
<script src="'.$BaseURL.'/1A/js/tablesorter/jquery.tablesorter.js"
type="text/javascript"></script>
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function()
{
$("#myTable").tablesorter({ widgets: [\'zebra\']} );
$(\'#MSFree\').hover(function(){
// do something on mouse over
$(\'#menu2\').show();
},function(){
// do something on mouse out
$(\'#menu2\').hide();
});
}
);
</script>
