![jquery悬停一个div]( "jquery悬停一个div")
本文介绍了jquery悬停一个div，并在另一个div上显示图像的效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
好的javascript新手在这里，我想要帮助！
这里的设计解释更好的情况。
我的代码：
< div class =design>
< div class =menu> 5个菜单选项将会出现在这个div中，当我们将鼠标悬停在每个链接上时，图像必须显示在右边，并且像拍摄一样有效。
< li class =menu-item> < a href =＃>菜单选项< / a>
< / li>
< li class =menu-item> < a href =＃>菜单选项< / a>
< / li>
< li class =menu-item> < a href =＃>菜单选项< / a>
< / li>
< li class =menu-item> < a href =＃>菜单选项< / a>
< / li>
< li class =menu-item> < a href =＃>菜单选项< / a>
< / li>
< / div>
< div class =zoom-preview>图片会出现在这里，当我们将鼠标悬停在左侧的每个链接上时。每个链接都是自己的图片。此外，如果我们没有将鼠标悬停在左侧的任何链接上，则此处必须有默认图片。< / div>
< div class =clear>< / div>
我想要做的是当我们进入页面时，右侧会出现一个默认图片。
但是当我们将鼠标悬停在左侧的每个链接上时，右侧的图像将被替换为另一个图像，并具有像拍摄这样的快速缩放效果。
请使用JavaScript代码进行一些帮助。谢谢！
演示
：
正如你所见，我是使用具有数据属性的列表来设置应该显示哪个图像（< li data-image ='image.jpg'>< a ...>< / a><
控制行为根据需要更改变量值：
$ b ） - 其余由JS处理。
$ b
var imageContainer ='.img_container'，//图像容器的选择器
imageList ='.hoverimage'，// t选择器他的图像列表
maxWidth ='parent'，//父级或特定CSS宽度。
defImage ='image_to_display.jpg';
OK javascript newbie here, I want help!
Here is the design that explains better the situation.
My JSFiddle Here
My Code:
<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>
All I want to do is when we enter the page there will be a default image at right.But when we hover at each link at the left, the image on the right will be replaced with another image, with a fast zoom effect like shooting for example.
When no link is hovered the default image will be again displayed.
Please some help with the javascript code.. Thanks!
解决方案
Here is a quick demo that will get you started:
Demo:jsFiddle
As you can see I'm using a list with data attributes to set which image should be displayed ( <li data-image='image.jpg'><a ...></a></li>) - the rest is handled by JS.
To control the behavior change the variables value as needed:
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';
这篇关于jquery悬停一个div，并在另一个div上显示图像的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！