个人中心
gpt4 book ai didi

javascript - 通过 JQuery 填充菜单

转载 作者：行者123 更新时间：2023-12-02 19:52:34 24 4
gpt4 key购买 nike

我想设计一个菜单，当我悬停链接时，链接会向前推，当我将鼠标移出该菜单时，链接会向后移动。

我知道我可以使用 .hover 函数来完成此操作。我不想使用 jQuery 事件。我只想使用嵌入在 html 标签中的 JavaScript 事件。

这是我的尝试:

  <script type="text/javascript">
  function MIn()
  {
    jQuery(this).animate({paddingLeft:"20px"},500);
  }
  function MOut()
  {
    jQuery(this).animate({paddingLeft:"0px"},500);
  }             
  </script>
</head>
<body>
  <ul>
    <li onmouseover = "MIn()" onmouseout="MOut()" ><a href="#">Home</a></li>
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">Download</a></li>
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">Products</a></li>
    <li onmouseover = "MIn()" onmouseout="MOut()"> <a href="#">Register</a></li>
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">About</a></li>
    <li onmouseover = "MIn()" onmouseout="MOut()"><a href="#">Contact</a></li>
  </ul>
</body>

最佳答案

方法中的

this 并不是您所期望的，因为您没有将调用绑定(bind)到元素..而是直接在窗口上下文中调用它.. this = == window 在你的情况下..

您应该使用 jQuery 进行绑定(bind)

$('li').hover(MIn, MOut);

并删除 onmouseover 和 onmouseout 属性..

演示 http://jsfiddle.net/FydWH/

关于javascript - 通过 JQuery 填充菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9098067/

24 4 0
文章推荐： javascript - ExtJS 反转边框布局行为
文章推荐： Javascript dropdownlist.selectedIndex 在 ASP.net 页面中导致错误
文章推荐： javascript - 如何使用javascript清除asp.net复选框列表中的所有项目并添加新项目
文章推荐： JavaScript 正则表达式模板 : only match when string inside brackets is equal