如何使用jquery使菜单与此网站的www.chanel.com相同

Question

大家好，我是jQuery的新手，我发现这个网站http://www.chanel.com/，我非常喜欢他们的菜单，例如当鼠标悬停时弹出图像，当鼠标移出时图像消失，并看到背景，所以我可以在Jquery中使用这样的东西吗？

      <ul>
       <li id="pic1"> Link 1 </li>
       <li id="pic2"> Link 2 </li>
       <li id="pic3"> Link 3 </li>
      <ul>

     <div id="pic1"><img src="pic1"></div>
     <div id="pic2"><img src="pic2"></div>
     <div id="pic3"><img src="pic3"></div>

那么，我该如何编写jQuery代码呢？

诚挚的问候

Answer 1

基于你发布的超文本标记语言，我建议遵循两个超文本标记语言的教程，就像jQuery一样。

例如，您没有为HTML中的元素使用唯一的in。

为了帮助你更进一步，这里有一些教程链接，我很快就找到了：

jQuery教程：http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/

HTML教程：http://www.tizag.com/htmlT/

Answer 2

如果我是你的话，从here开始是个不错的选择。我从这个网站学到了很多东西。另外，你提到的菜单效果实际上已经在这个网站上用作了一个例子。干杯。

Answer 3

首先，您应该更改三个div的id，例如：

然后

enter code here

<script type="text/javascript">
$(document).ready(function() {
$("#pic1").hover(function(){
$("#div1").show();
});
$("#pic2").hover(function(){
$("#div2").show();
});
$("#pic3").hover(function(){
$("#div3").show();
});
});
</script>