jquery将一个div悬停，并在另一个div上显示图像

好的，新手，我需要帮助

这里的设计可以更好地解释这种情况

我的代码：

<div class="design">
<div class="menu">5 menu options will be in this div and when we hover at each link an image must appear to the right with fast zoom in effect like shooting.
    <li class="menu-item"> <a href="#">menu option</a>
    </li>
    <li class="menu-item"> <a href="#">menu option</a>
    </li>
    <li class="menu-item"> <a href="#">menu option</a>
    </li>
    <li class="menu-item"> <a href="#">menu option</a>
    </li>
    <li class="menu-item"> <a href="#">menu option</a>
    </li>
</div>
<div class="zoom-preview">image will appear here when we hover at each link at the left. each link it's own image. Also there must be a default image here when we do not hover at any link at the left.</div>
<div class="clear"></div>

5个菜单选项将在此div中，当我们在每个链接上悬停时，图像必须显示在右侧，具有像拍摄一样的快速放大效果。










当我们将鼠标悬停在左侧的每个链接上时，图像将出现在此处。每个链接都有自己的图像。当我们不在左边的任何链接上悬停时，这里必须有一个默认图像。

我想做的就是当我们进入页面时，右边会有一个默认图像。 但当我们将鼠标悬停在左侧的每个链接上时，右侧的图像将替换为另一个图像，具有快速缩放效果，例如拍摄

当没有链接悬停时，将再次显示默认图像

---

请提供有关javascript代码的帮助。。谢谢

下面是一个快速演示，可以让您开始：

演示：

正如您所看到的，我正在使用一个带有数据属性的列表来设置应该显示哪个图像（

），其余的由JS处理

要控制行为，请根据需要更改变量值：

var imageContainer = '.img_container', //selector of the image container
    imageList      = '.hoverimage',     //selector of the image list
    maxWidth       = 'parent',          //parent or specific CSS width. 
    defImage       = 'image_to_display.jpg';

JSFiddle：

您需要为这些图像设置一个源

Jquery：

$("a").hover(function(){
    $(".zoom-preview").html($(this).html());
  },
  function() {
    $( ".zoom-preview" ).html( "image will appear here when we hover at each link at the left. each link it's own image. Also there must be a default image here when we do not hover at any link at the left." );
  });

HTML:

5个菜单选项将在此div中，当我们在每个链接上悬停时，图像必须显示在右侧，具有像拍摄一样的快速放大效果。










原始内容

---

在鼠标悬停输入时，将html放入链接中，并将其放入显示框中。当它离开时，您将把原始内容放回原处。

您的小提琴中甚至没有任何javascript。您看过jquery文档了吗？有一个叫做悬停的事件。你可以触发它，做任何你想做的事。试试看，然后回来问。我知道我应该得到这个答案。。你是对的，我会检查它，并尝试，如果你能提供任何其他帮助将非常感激。谢谢一旦你提供了你已经尝试过的，我们可以帮助你。如果没有这些，您希望我们为您编写代码，而这将使您一无所获。好的，直到现在，我设法使默认图像消失，并在鼠标进入和鼠标离开时显示。现在，我必须了解如何在悬停每个菜单项时显示替代图像

<div class="design">
<div class="menu">5 menu options will be in this div and when we hover at each link an image must appear to the right with fast zoom in effect like shooting.
           <li class="menu-item">
               <a href="#"><img alt="foo"/></a></li>
           <li class="menu-item">
       <a href="#"><img alt="bar"/></a></li>
          <li class="menu-item">
       <a href="#"><img alt="bam"/></a></li>
          <li class="menu-item">
       <a href="#"><img alt="baz"/></a></li>
          <li class="menu-item">
       <a href="#"><img alt="quux"/></a></li>
       </div>
       <div class="zoom-preview"> 
       original content
       </div>
       <div class="clear"></div>
       </div>