Hi All,
I'm new to jQuery and JS, so if this is a simple problem to solve I apologize

I've crafted a bit of code that does 95% of what I want it to do:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
$(document).ready(function() {
  $('#slidebottom img').mouseover(function() {
 $(this).next().slideToggle("fast");
  });
  $('#slidebottom img').mouseout(function() {
 $(this).next().slideToggle("fast");
  });
});
  </script>
  
<style>
.slide {
position: relative;
background-color:#FFFFCC;
border:10px solid #ccc;
height:218px;
margin:1em 0;
overflow:hidden;
position:relative;
width:262px;
}
.slide .inner {
background-color:#44CC55;
bottom:0;
color:#333333;
height:36px;
left:0;
padding:6px;
display:none;
position:absolute;
width:338px;
}
</style>
</head>
<body>

<div id="slidebottom" class="slide">
<img src="http://s271294734.onlinehome.us/images/project_center_island.jpg" alt="" />
  <div class="inner">Slide from bottom</div>
</div>

</body>
</html>
Run this code and hover over the image, you'll see a green box slide up from the bottom of the surrounding div. The problem is, if you hover over the green sliding div, it bounces up and down. My plan is to have it stay on when the user hovers over the green div so if there's a link in there or something like that, they can click on it. What's missing in the code? Thanks in advance!

Regards,
Matt