Improving my mouseenter/mouseleave script

Improving my mouseenter/mouseleave script

Hi everyone,

I've been fiddling around with Jquery and made the following script.

It took me some time, but now it works like a charm!

The purpose of it is to show a related text on hovering the inside boxes. The text dissapears whenever your mouse leaves the outside box.

Since i'm not a big geeky expert on Jquery, I was wondering how this script could be improved into a better, compact, less coded way.

Any ideas?

<!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(){
   


   //enter 1
    $("#in1").bind("mouseenter",function(){
     $("#box1").removeClass("hidden");
     $("#box2,#box3").addClass("hidden") 
    });
   
   //enter 2
    $("#in2").bind("mouseenter",function(){
     $("#box2").removeClass("hidden");
     $("#box1,#box3").addClass("hidden") 
    });
   
   //enter 3
    $("#in3").bind("mouseenter",function(){
     $("#box3").removeClass("hidden");
     $("#box1,#box2").addClass("hidden") 
    });
   
   
   //leave
    $("#outside").bind("mouseleave",function(){
     $("#box1,#box2,#box3").addClass("hidden") 
    });

   

  });
  </script>
<style>
.hidden { visibility:hidden; }
#outside { width:300px; height:150px; margin:0 15px; background-color:#D6EDFC; }
#in1, #in2, #in3 { width:100px; height:30px; background-color:#FFCC00; margin:10px auto; }
p { margin:0; padding:0; }
</style>
</head>
<body>
<!--outside box-->
<div id="outside">
   <!--1,2,3 inside boxes-->
   <div id="in1">1</div>
   <div id="in2">2</div>
   <div id="in3">3</div>
</div>
<!--List of hovered boxes-->
<p id="box1" class="hidden">box1</p>
<p id="box2" class="hidden">box2</p>
<p id="box3" class="hidden">box3</p>
</body>
</html>