Question

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

我想在我的网站上使用此效果。没有任何css的效果，所以必须使用一些JavaScript。我怎么能重现这个或在哪里可以找到可以在我的网站上执行此操作的JavaScript？简单地说，我怎么能实现这个目标？

Answer 1

没有必要使用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.3秒）

Answer 2

使用的最佳语言是javascript和库JQuery。使用命令.toggleSlide和.hover（）我在下面放了一些代码作为例子。进一步研究它以获得更高级的效果。

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

“。home将”成为说出“Home”的菜单标签

“#home_div”将出现红色框。

总结一下所有的代码：你基本上是说当你将html元素悬停在类“home”（在菜单项的情况下）上，以使id为“home_div”的html元素向下滑动缓慢。然后停止鼠标悬停后再向后滑动。

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

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

2 个答案: