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

Question

这是应用在主菜单上的一个很好的悬停效果（菜单上方的红色矩形）：http://www.templatemonster.com/demo/37841.html

我想在我的网站上使用这种效果。该效果没有 css，因此必须使用一些 javascript。我怎样才能重现这个，或者我在哪里可以找到可以在我的网站上做到这一点的 javascript？简而言之，我怎样才能做到这一点？

Answer 1

不需要使用javascript，你可以通过CSS来实现，尝试切换任何link的悬停状态，你会看到效果。

相关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;
}

所以，基本上，有一个偏移量为 100 像素的背景图像（红色矩形）；当您悬停 link 时，背景偏移消失（有 0.3 秒的过渡）

Answer 2

最好使用的语言是 javascript 和库 JQuery。使用命令 .toggleSlide 和 .hover() 我在下面放了一些代码作为示例。对其进行更多研究以获得更先进的技术。

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

".home 将"是显示 "Home"

的菜单选项卡 "#home_div" 将是出现的红色框。

总结所有代码：你基本上是说当你将鼠标悬停在 html 元素上时 class "home" （在菜单项的情况下）有 html id为"home_div"的元素缓慢向下滑动。然后在您停止悬停鼠标后向后滑动。

祝你好运。如果您想了解更多关于 jquery 的信息，请进行研究。

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

Menu hover effect - how to reproduce this effect?

javascript

css

jquery

effects

hover