After cobbling together a few questions I've managed to get this far to showing / hiding divs:

$(document).ready(function(){
 $('.box').hide();
  $('#categories').onMouseOver(function() {
    $('.box').hide();
    $('#div' + $(this).val()).show();
 });
});

HTML:

<div id="categories">
 <div id="btn-top20"><a href="">Top 20 Villas</a></div>
 <div id="btn-villaspec"><a href="">Villa Specials</a></div>
 <div id="btn-staffpicks"><a href="">Our Staff Picks</a></div>
</div>

<div id="category-content">
 <div id="divarea1" class="box">
  Content 1
 </div>

 <div id="divarea2" class="box">
  Content 2
 </div>

 <div id="divarea3" class="box">
  Content 3
 </div>    
</div>

What am I missing?