In this Jquery script for switching a class on hover, How do I simplify it for repeated instances
<p>I will need to replicate this functionality for multiple elements on the page, I can achieve it by repeating the function and changing the class name, but is there a simpler way to combine multiple instances or change the class name? In the style sheet I am animating the title of each image when the link is rolled over.</p>

<p>The Function:</p>

<pre><code> $("a.link1").hover(function() {
  $(".img1, .img1over").toggleClass("img1 img1over");
});
$("a.link2").hover(function() {
  $(".img2, .img2over").toggleClass("img2 img2over");
});
</code></pre>

<p>the HTML:</p>

<pre><code>&lt;div id="nav"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#" class="link1"&gt;link1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="link2"&gt;link2&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;
&lt;/div&gt;

            &lt;div class="main"&gt;
                &lt;div class="grid img1"&gt;
                    &lt;img src="1.jpg" /&gt;
                    &lt;div class="mask"&gt;
                        &lt;h2&gt;title&lt;/h2&gt;
                    &lt;/div&gt;
                    &lt;/div&gt;

                    &lt;div class="grid img2"&gt;
                    &lt;img src="1.jpg" /&gt;
                    &lt;div class="mask"&gt;
                        &lt;h2&gt;title&lt;/h2&gt;
                    &lt;/div&gt;
                    &lt;/div&gt;

        &lt;/div&gt;
</code></pre>
