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

基于你发布的HTML，我建议你在HTML和jQuery上遵循tutotials。

E.g。您没有为HTML中的元素使用唯一ID。

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

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>

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

3 个答案: