jQuery Hover to Change Another Element on the Page

Question

I am new to jQuery and trying to create an interactive slider on Wordpress that does two things:

1)On hover, it displays a new div in the main photo box

2)On click of the link, it takes you to that page

However, the error console is telling me that next is not defined later in the script.

This is what I have so far:

    function slideShow() {
            var current = jQuery('#featArea.show');
        var next = jQuery('#defaultImg');

        $('div#featLinkWorkshop a').hover (
            function() {
                next = jQuery('div#featWorkshops');
            }

//repeat the above for each section

    current.removeClass('show');
        next.fadeIn().addClass('show');

        setTimeout(slideShow, 3000);
    }

HTML

<div id="defaultImg" class="featImg show">
    <img src="#" />
</div>

<div id="featWorkshops" class="featImg">
    <img src="#" />
<div class="featImgCaption">

    <h1>Caption Title</h1>
    <p>Sentence of interest.</p>
    </div>
</div>

Then Later in the HTML

<div class="featLink" id="featLinkWorkshop">
    <img src="#" />

    <a href="#">Workshops</a>
</div>

Here is the page that you can view it on: http://www.toppling-dominoes.com/sevenoaks. Thank you so much!

UPDATE: I have gotten the slider nearly functioning with the help of wahtever's ideas and this tutorial. The cycle plugin has a lot more to it than I initially thought.

Answer 1

try the jquery cycle plugin: http://jquery.malsup.com/cycle/

1- you can go here to see how to generate thumbnails : http://jquery.malsup.com/cycle/pager2.html

2- and here to see how to generate captions : http://jquery.malsup.com/cycle/caption.html

combining those two together will take care of the sildeshow part the rest is a matter of css styles.