jQuery悬停一个div并在另一个div上显示图像

Tasfer 发表于 Dev

塔夫

OK javascript newbie 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代码的帮助。

Shlomi Hassid

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

演示：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';

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。