jQuery 悬停更改页面上的另一个元素

Question

我是 jQuery 新手，并尝试在 Wordpress 上创建一个交互式滑块，它可以做两件事：

1)悬停时，它会在主照片框中显示一个新的 div

2)点击链接后会跳转到该页面

但是，错误控制台告诉我，脚本后面没有定义 next。

这是我目前所拥有的：

    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>

然后在 HTML 中

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

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

这是您可以查看的页面：http://www.toppling-dominoes.com/sevenoaks。 非常感谢！

更新：在 wahtever 的想法和 this tutorial 的帮助下，我已经使滑块几乎可以正常工作。循环插件比我最初想象的要多得多。

Answer 1

试试jquery循环插件：http://jquery.malsup.com/cycle/

1- 你可以去这里看看如何生成缩略图： http://jquery.malsup.com/cycle/pager2.html

2- 在这里查看如何生成字幕： http://jquery.malsup.com/cycle/caption.html

将这两者结合在一起将处理 sildeshow 部分，其余部分是 css 样式的问题。