Making smarter jQuery code
<p>I was wondering if anyone has any idea on how I could rewrite this simple jquery code to be more efficient. It's of course working fine now but I imagine adding say 10 more items would make the code really big. I thought maybe I could add the classes to arrays and use some kind of loop? Not sure if that's the right approach though.</p>

<p>Here it is on jsfiddle:
<a href="http://jsfiddle.net/QVS9X/42/" rel="nofollow">http://jsfiddle.net/QVS9X/42/</a></p>

<p>and here's a sample of it:
JS:</p>

<pre><code>$(".image1").mouseout(function() {
    $(".default").show();
    $(".cat1").hide();
}).mouseover(function() {
    $(".default").hide();
    $(".cat1").show();
});

$(".image2").mouseout(function() {
    $(".default").show();
    $(".cat2").hide();
}).mouseover(function() {
    $(".default").hide();
    $(".cat2").show();
});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="image1 image"&gt;
    &lt;p&gt;Hover for cat 1&lt;/p&gt;
&lt;/div&gt;
&lt;div class="image2 image"&gt;
    &lt;p&gt;Hover for cat 2&lt;/p&gt;
&lt;/div&gt;
&lt;div class="image3 image"&gt;
    &lt;p&gt;Hover for cat 3&lt;/p&gt;
&lt;/div&gt;
&lt;div class="default"&gt;
    &lt;p&gt;Default Text&lt;/p&gt;
&lt;/div&gt;
&lt;div id="cats"&gt;
    &lt;p class="cat1"&gt;Category 1 text&lt;/p&gt;
    &lt;p class="cat2"&gt;Category 2 text&lt;/p&gt;
    &lt;p class="cat3"&gt;Category 3 text&lt;/p&gt;
&lt;/div&gt;
</code></pre>
