Show Logo and Text using jQuery When Hover on Link

[AycheKay]

I have a div full of links formatted to look basically like square buttons. Each link represents a given product brand. Currently they are anchor tags that link only to # but in the future they may need to link to webpages.

When the user hovers on each link, I want to display the relevant logo image and some explanatory text. What gets displayed will be different for every link they hover on. The box needs to display near their cursor (or near the link) and disappear after they are done hovering.

How can this be done?

Here's an example of the kind of code I'm imagining:

<a href="#">Applegate Farms</a><div><img src="applegate-farms-logo.png"><p>Organic and Natural Meat Products</p></div>
<a href="#">Arrowhead Mills</a><div><img src="arrowhead-mills-logo.png"><p>Bread and pancake mixes, hot and cold cereals, seeds and grains</p></div>
<a href="#">Artisana</a><div><img src="artisana-logo.png"><p>Organic Nut and Seed Butters</p></div>
<a href="#">Back to Nature</a><div><img src="back-to-nature-logo.png"><p>Cookies, Crackers, Granolas</p></div>

I found this code on StackOverflow but it doesn't work for me. I don't know how to display different data for each different link. It appears to me the code is going to load the img from the id #cursor for every link.

<script type="text/javascript">
    $(document).ready(function() {
        var $img = $("#cursor");
        $img.hide();
        $('a').mousemove(function(e) {
            $img.stop(1, 1).fadeIn();
            $img.offset({
                top: e.pageY - $img.outerHeight(),
                left: e.pageX - ($img.outerWidth()/2)
            });
        }).mouseleave(function() {
            $img.fadeOut();
        });
    });
</script>

[pritaeas]

What you can do is to add a hidden div for each button you have, which you can then show on hover. You could have something like this:

<div class="button">
  <a href="#">Link</a>
  <div class="hidden">
    <img />
    <p />
  </div>
</div>

Then the jQuery would look like this:

$('.button').hover(
  function () {
    $(this).find('.hidden').show();
  },
  function () {
    $(this).find('.hidden').hide();
  }
);