why doesn't this work
why doesn't this work
I am trying to figure out how to get this to work. I have a simple link. When you hover or mouseover the link. the box below slideToggles in. when you mouseout of the link. the box slideToggles out. What I want is to beable to keep my mouse in the box that appears and when i mouseout of that box, then the box will slideToggle. but i can't figure out how to get it to work.
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.corner.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box-four { width:200px; height: 200px; background:#000000; color:#fff; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".box-four").corner();
});
$(document).ready(function() {
$('.box-four').hide();
$('a#button').hover(function() {
$('.box-four').slideToggle(400);
return false;
});
});
$(document).ready(function() {
$('.box-four').onmouseout(function() {
$('.box-four').slideToggle(400);
return false;
});
});
</script>
<title></title>
</head>
<body>
<a id="button" href="#" >click</a>
<div class="box-four">Put your content here</div>
<div id="hidden"> more content</div>
</body>
</html>