Jquery: Displaying picture and text when hovering over an <a> tag
<p>I am currently working with jquery and <code>&lt;a&gt;</code> tags. Right now I have been able to get an image displayed everytime I mouse hover an  tag. I am struggling with the part of actually displaying text underneath the picture that corresponds to the right <code>&lt;a&gt;</code> tag. How can I display a corresponding <code>&lt;legend&gt;</code> underneath each picture during the mouse hover? Show one legend at a time along with the matching picture. Here is my <a href="http://webprolearner2346.zxq.net/example_code/" rel="nofollow">EXAMPLE</a></p>

<p><strong>Code Jquery</strong></p>

<pre><code>&lt;script&gt;
$(document).ready(function () {
var $images = $("div#images");
var $currentImage = $images.children("img#cheeseburger");

$currentImage .show();

$("div#links &gt; a").mouseenter(function() {
    var ID = $(this).data("content");
    var $image = $images.children("img#" + ID);

    if (!$image.is($currentImage)) {
        $currentImage.hide();
    }

    $currentImage = $image;
    $image.stop(true, true).fadeIn("slow");
});

});
&lt;/script&gt;
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="links"&gt;
    &lt;h2&gt; Select A Category &lt;/h2&gt; 
    &lt;a href="example.htm" class="large magenta awesome" data-content="cheeseburger"&gt;Cheeseburger »&lt;/a&gt;
    &lt;a href="example.htm" class="large blue awesome" data-content="tacos"&gt;Tacos »&lt;/a&gt;
    &lt;a href="example.htm" class="large red awesome" data-content="salads"&gt;Salads »&lt;/a&gt;
&lt;/div&gt;
&lt;center&gt;
    &lt;br /&gt;
    &lt;div id="images"&gt;
        &lt;img src="images/cheeseburger.jpg" id="cheeseburger"&gt;
        &lt;img src="images/tacos.jpg" id="tacos"&gt;
        &lt;img src="images/salad.jpg" id="salads" &gt;
    &lt;/div&gt;      
&lt;/center&gt;

&lt;fieldset class="el05"&gt;
        &lt;legend style="font-size:15px;"&gt;&lt;b&gt;Cheeseburger:&lt;/b&gt;&lt;/legend&gt;
        &lt;p&gt; Example one&lt;/p&gt;
&lt;/fieldset&gt;

&lt;fieldset class="el05"&gt;
        &lt;legend style="font-size:15px;"&gt;&lt;b&gt;Tacos:&lt;/b&gt;&lt;/legend&gt;
        &lt;p&gt; Example two.&lt;/p&gt;
&lt;/fieldset&gt;

&lt;fieldset class="el05"&gt;
        &lt;legend style="font-size:15px;"&gt;&lt;b&gt;Salad:&lt;/b&gt;&lt;/legend&gt;
        &lt;p&gt; Example three.&lt;/p&gt;
&lt;/fieldset&gt;
</code></pre>
