Question

I am currently working with jquery and <a> 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 <a> tag. How can I display a corresponding <legend> underneath each picture during the mouse hover? Show one legend at a time along with the matching picture. Here is my EXAMPLE

Code Jquery

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

$currentImage .show();

$("div#links > 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");
});

});
</script>

HTML

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

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

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

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

Answer 1

try something like this i have just implemented on one

 <fieldset class="cheeseburger">
    <legend style="font-size:15px;"><b>Cheeseburger:</b></legend>
    <p> Example one</p>
</fieldset>


<script>
 $(document).ready(function () {
 var $images = $("div#images");
 var $currentfieldset = $(".cheeseburger");
 var $currentImage = $images.children("img#cheeseburger");

 $currentImage .show();

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

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

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

 });
 </script>