将鼠标悬停在左侧的图像，然后右侧的图像将使用滑动切换进行更改

Question

美好的一天。我在横幅 (saksoff5th.com) 中做了这样的设计，我改用 slideToggle。当我将图像悬停在左侧时，右侧的横幅图像会发生变化。但是我在将图像悬停在右侧时遇到了困难。就像当我将图像悬停在左侧时，右侧的图像是错误的。我也不知道如何让我的图像正确显示在正确的部分。它们都在一个垂直方向上。我希望它的工作方式就像我将第一张图片悬停在左侧时，右侧的第一张图片就会出现。当我将第二张图片悬停在右边时，第二张图片会出现，第一张图片会隐藏等等。

这是我的 jsfiddle(http://jsfiddle.net/deanilvincent/7Lgks56u/2/) 注意：它现在可以工作了！感谢您的帮助：D

帮我解决这个问题。提前致谢。

我的 HTML 标签：

<div class="container">
    <div id="left-panel">
        <ul>
            <li class="first-left"><a href="#"><img src="images/1st.png" /></a></li>
            <li class="second-left"><a href="#"><img src="images/2nd.png" /></a></li>
            <li class="third-left"><a href="#"><img src="images/3rd.png" /></a></li>
            <li class="fourth-left"><a href="#"><img src="images/4th.png" /></a></li>
        </ul>
    </div>

    <div id="right-panel">
        <ul>
        <li class="first-right"><a href="#"><img src="images/banner1.jpg" /></a></li>
        <li class="second-right"><a href="#"><img src="images/banner2.jpg" /></a></li>
        <li class="third-right"><a href="#"><img src="images/banner3.jpg" /></a></li>
        <li class="fourth-right"><a href="#"><img src="images/banner4.jpg" /></a></li>
        </ul>
    </div>
</div>

我的Javascript/Jquery:

$(document).ready(function(){
        $("#left-panel ul li.first-left").mouseover(function(){
            $("#right-panel ul li.first-right").slideToggle("Fast");
        });

        $("#left-panel ul li.second-left").mouseover(function(){
            $("#right-panel ul li.second-right").slideToggle("Fast");
        });

        $("#left-panel ul li.third-left").mouseover(function(){
            $("#right-panel ul li.third-right").slideToggle("Fast");
        });

        $("#left-panel ul li.fourth-left").mouseover(function(){
            $("#right-panel ul li.fourth-right").slideToggle("Fast");
        });
    });

我的CSS:

.container{
        width:1200px;
        margin:0px auto;
    }
    #left-panel{
        width:20%;
        float:left;
    }
    #left-panel ul li a:hover{
        background-color:#eeeeee;
    }
    #left-panel ul li{
        list-style-type:none;
    }
    #right-panel ul li{
        list-style-type:none;
    }
    #right-panel{
        width:80%;
        float:left;
    }

Answer 1

您没有在 fiddle 中包含 jQuery（来自左侧的菜单）

这是一个工作演示：http://jsfiddle.net/mirohristov/7Lgks56u/5/

     //Hide all except the first
    $("#right-panel ul li").not("#right-panel ul li.first-right").stop().slideUp("Fast");


    $("#left-panel ul li.first-left").mouseover(function(){
        //Hide all
        $("#right-panel ul li").stop().slideUp("Fast");
        //Show the first 
        $("#right-panel ul li.first-right").stop().slideDown("Fast");
    }); 

//etc...

Answer 2

我认为您在 JSFiddle 中的代码无法正常工作，因为您没有导入 jquery，这只是一个细节。无论何时，如果你想在左图上输入鼠标时显示正确的右图并且只显示那个图像，你必须准确地写，例如，如果你输入鼠标在第二张左图上，所以第二张右图将 slidetoggle 而其他人将 hide，这就是想法，这是丑陋的片段但是有效：

$(document).ready(function(){
  $("#left-panel ul li.first-left").mouseover(function(){
    if (!$("#right-panel ul li.first-right").is(":visible")) 
      $("#right-panel ul li.first-right").slideToggle("Fast");
    $("#right-panel ul li.second-right").hide();
    $("#right-panel ul li.third-right").hide();
    $("#right-panel ul li.fourth-right").hide();
  });

  $("#left-panel ul li.second-left").mouseover(function(){
    if (!$("#right-panel ul li.second-right").is(":visible")) 
      $("#right-panel ul li.second-right").slideToggle("Fast");
    $("#right-panel ul li.first-right").hide();
    $("#right-panel ul li.third-right").hide();
    $("#right-panel ul li.fourth-right").hide();
  });

  $("#left-panel ul li.third-left").mouseover(function(){
    if (!$("#right-panel ul li.third-right").is(":visible")) 
      $("#right-panel ul li.third-right").slideToggle("Fast");
    $("#right-panel ul li.first-right").hide();
    $("#right-panel ul li.second-right").hide();
    $("#right-panel ul li.fourth-right").hide();
  });

  $("#left-panel ul li.fourth-left").mouseover(function(){
    if (!$("#right-panel ul li.fourth-right").is(":visible"))
      $("#right-panel ul li.fourth-right").slideToggle("Fast");
    $("#right-panel ul li.first-right").hide();
    $("#right-panel ul li.second-right").hide();
    $("#right-panel ul li.third-right").hide();
  });
});

并且您必须在样式表中添加：

#right-panel li {
  display: none;
}

#right-panel li:nth-child(1) {
  display: block;
}

这是因为，最初会默认显示第一张图片。

将鼠标悬停在左侧的图像，然后右侧的图像将使用滑动切换进行更改

Hovering Images on the Left then the Images on the Right will change using Slide Toggle

html

javascript

css

jquery

slidetoggle