Menu 使用JQuery显示不同的基于图像的悬停项

我正在努力完成两件事：

左列：默认情况下，步骤会淡入，但悬停时各个步骤会淡入全色

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

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

$(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');
    }
);

}))

如果使用“悬停”，当您离开左栏时，图像将始终消失（我不确定您是否需要它）。您可以在“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();