Swap Divs onmouseover of table rows
<p>I'm looking for a way that I can swap between divs when I hover over table rows and the only solution I've found is that effect when hovering over a list.  I really don't understand jquery fully yet so I'm hoping its just a simple change that can be made.</p>

<p>This is the code that I came across for hovering over a list, the only change that I want is for the list to be a table.</p>

<pre><code>script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function () {
    $("#switches li").mouseover(function () {
        var $this = $(this);
        $("#slides div").hide();
        $("#slide" + $this.attr("id").replace(/switch/, "")).show();
        $("#switches li").css("font-weight", "normal");
        $this.css("font-weight", "bold");
    });
});
&lt;/script&gt;

&lt;ul id="switches"&gt;
  &lt;li id="switch1" style="font-weight:bold;"&gt;First slide&lt;/li&gt;
  &lt;li id="switch2"&gt;Second slide&lt;/li&gt;
  &lt;li id="switch3"&gt;Third slide&lt;/li&gt;
  &lt;li id="switch4"&gt;Fourth slide&lt;/li&gt;
&lt;/ul&gt;
&lt;div id="slides"&gt;
  &lt;div id="slide1"&gt;Well well.&lt;/div&gt;
  &lt;div id="slide2" style="display:none;"&gt;Oh no!&lt;/div&gt;
  &lt;div id="slide3" style="display:none;"&gt;You again?&lt;/div&gt;
  &lt;div id="slide4" style="display:none;"&gt;I'm gone!&lt;/div&gt;
&lt;/div&gt;
</code></pre>
