使用 JQuery 显示不同的基于图像的项目悬停答案

【问题标题】：Using JQuery to display different image based item hovered使用 JQuery 显示不同的基于图像的项目悬停
【发布时间】：2015-12-10 01:03:47
【问题描述】：

我正在尝试完成两件事：

左栏：默认情况下，步数会淡化，但悬停时单个步数会淡化为全彩。

右列：根据悬停在左列中的步骤显示不同的图像。默认情况下，应该显示第一张图片。

我正在使用 fadeIn 功能，但我无法让它按我希望的方式工作。这样做的最佳方法是什么？

Jsfiddle Example

$(document).ready(function() {


$('#step-one')
.hover(
    function() {
        $('#step-one-image-holder').fadeIn('slow');
    }, function() {
        $('#step-one-image-holder').fadeOut('fast');
    }
);

$('#step-two')
.hover(
    function() {
        $('#step-two-image-holder').fadeIn('slow');
    }, function() {
        $('#step-two-image-holder').fadeOut('fast');
    }
);

$('#step-three')
.hover(
    function() {
        $('#step-three-image-holder').fadeIn('slow');
    }, function() {
        $('#step-three-image-holder').fadeOut('fast');
    }
);

});

【问题讨论】：

标签： menu hover jsfiddle interactive

【解决方案1】：

如果你使用“悬停”，当你离开左栏时，图像总是会消失（我不确定你是否想要它）。您可以在“mouseenter”事件中使用“fadeIn”和“fadeOut”：

（也许您需要将图像放在绝对位置以避免闪烁）

//---Show images on mouseenter
$("div[id^='step-']").on("mouseenter", function(){

    var image = $("img[id='" + $(this).attr("id") + "-image-holder']");

    $("img[id^='step-']").not(image).fadeOut();

    image.fadeIn();    

});

//---Hide images by default
$("img[id^='step-']:gt(0)").hide();

jsfiddle

【讨论】：