如何在此代码中从“单击”更改为鼠标悬停

Question

我有这个代码，我需要在拇指上加载鼠标悬停上的较大图像，而不是在点击上加载。此外，当加载较大的图像以通过所有图像时，是否可以以简单的方式添加“下一个”和“上一个”按钮？ 谢谢！

/**
 * Image toggle in product page previews
 */
$(".product-preview li a").each(function(i,el) {
    var _t = $(el);
    _t.click(function(e) {
        var pr = _t.closest("ul").next(".large-preview"),
            dtsrc = _t.data("src"),
            loader = pr.find("span.load");
        e.preventDefault();
        // fadeout preview-image
        pr.find("img").fadeOut(function(){
            // remove it
            $(this).remove();
            // light-up the loader
            loader.addClass("loading");
            // create new image, append it and reveal it
            var img = $('<img />').hide().attr({ 'src': dtsrc, 'class': 'img-responsive' }).load(function(){
                loader.removeClass("loading");
            }).appendTo(pr).fadeIn();
        });
        // update the large preview
        pr.attr("href", _t.data("large"));
    });
});

HTML：

<div class="product-preview clearfix">
    <ul class="thumblist">

        <li>
            <a href="#" data-src="cover.jpg" data-large="cover.jpg">
                <img src="cover.jpg" alt="" class="img-responsive">
            </a>
        </li>
        <li>
            <a href="#" data-src="1.jpg" data-large="1.jpg">
                <img src="1.jpg" alt="" class="img-responsive">
            </a>
        </li>
        <li>
            <a href="#" data-src="2.jpg" data-large="2.jpg">
                <img src="2.jpg" alt="" class="img-responsive">
            </a>
        </li>
        <li>
            <a href="#" data-src="3.jpg" data-large="3.jpg">
                <img src="3.jpg" alt="" class="img-responsive">
            </a>
        </li>
        <li>
            <a href="#" data-src="4.jpg" data-large="4.jpg">
                <img src="4.jpg" alt="" class="img-responsive">
            </a>
        </li>

    </ul>
    <!-- // thumblist -->



    <a href="cover.jpg" class="large-preview" data-lightbox="image">
        <span class="load"></span>
        <img src="cover.jpg" alt="" width="460" class="img-responsive">
    </a>
    <!-- // large-preview -->
</div>
<!-- //product-preview -->

Answer 1

将_t.click(function(e) {更改为

_t.on('hover', function(e) {

您也可以使用mouseover

_t.on('mouseover', function(e) {

参考：http://api.jquery.com/on/