jquery悬停一个div并在另一个div上显示图像效果答案

【问题标题】：jquery hover a div and display image on another div with effectjquery悬停一个div并在另一个div上显示图像效果
【发布时间】：2015-05-16 12:10:05
【问题描述】：

好的javascript新手在这里，我需要帮助！

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

My JSFiddle Here

我的代码：

<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>

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

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

请对 javascript 代码提供一些帮助。谢谢！

【问题讨论】：

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

标签： jquery html image hover preview

【解决方案1】：

这是一个快速演示，可帮助您入门：

演示：jsFiddle

如您所见，我使用带有数据属性的列表来设置应显示的图像 (<li data-image='image.jpg'><a ...></a></li>) - 其余部分由 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';

【讨论】：

【解决方案2】：

JSFiddle：http://jsfiddle.net/r6ywtk6u/

您需要为图片添加来源

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：

<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>

在悬停输入时，您将链接内的 html 放入显示框中。当它离开时，你把原来的内容放回去。

【讨论】：