Question

I am currently working with buttons and images. I have seen several tutorials for gettting a button to appear after hovering over an image. I am trying to do the reverse of this operation. My question: how can I get a picture(s) to appear after hovering over an a <a> tag(s) with jquery? Is it possible?

HTML

    <a href="example.htm" class="large magenta awesome">Cheeseburger »</a>
    <a href="example.htm" class="large blue awesome">Tacos »</a>
    <a href="example.htm" class="large red awesome">Salads »</a>
    <a href="example.htm" class="large orange awesome">Bread Sticks »</a>
    <a href="example.htm" class="large yellow awesome">Dessert »</a>

Answer 1

I think the best idea is to use a data-[type] and compare it with an ID, class or other data-type. You can also do this with a class ofcourse.

Here is a fiddle. And here is the jQuery code:

$("div#links > a").hover(
    function() {
        var ID = $(this).data("content");
        $("div#images").children("img#" + ID).fadeIn("slow");
    },
    function() {
        var ID = $(this).data("content");
        $("div#images").children("img#" + ID).stop(true).hide();
    }
);​