Javascript 菜单悬停效果-如何重现这种效果？

主菜单上有一个很好的悬停效果（菜单上方的红色矩形）：

---

我想在我的网站上使用这个效果。没有任何css可以实现这种效果，因此必须使用一些javascript。我该如何复制它，或者在我的网站上哪里可以找到可以这样做的javascript？简单地说，我该如何实现这一点呢？

不需要使用javascript，您可以通过CSS实现，尝试在任何链接上切换悬停状态，您将看到效果

相关的CSS是

#superfish-1 > li > a {
    -webkit-transition: all .3s ease;
    padding: 98px 10px 0 10px !important;
    background: url(../images/menu_hover.gif) 0 -100px repeat-x;
}

#superfish-1 a:hover {
      background-position: 0 0;
}

---

因此，基本上，存在偏移量为100px的背景图像（红色矩形）；当您悬停链接时，背景偏移消失（0.3s转换）

最好使用的语言是javascript和库JQuery。使用命令.toggleSlide和.hover（）我在下面放了一些代码作为示例。对它进行更多的研究以获得更高的水平

$(document).ready(function(){
    $('.home').hover(function(){
        $('#home_div').toggleSlide('slow');
    });
});

“.home”将是显示“home”的菜单选项卡

“#home_div”将是出现的红色框。

总结一下所有的代码：您基本上是说，当您将鼠标悬停在类为“home”（在本例中为菜单项）的html元素上时，id为“home\u div”的html元素将缓慢向下滑动。然后在鼠标停止悬停后向后滑动

祝你好运如果您想更多地了解jquery，只需研究它