JQUERY Live Hover

菜单悬停效果实现

最新推荐文章于 2025-11-29 13:42:57 发布

最新推荐文章于 2025-11-29 13:42:57 发布 · 99 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery实现的菜单悬停效果。当鼠标移入指定元素时，背景图片和文字颜色会发生变化，并显示下拉菜单；鼠标移出时则恢复原状并隐藏下拉菜单。特别注意在Mozilla浏览器中对子链接宽度的调整。

//菜单效果
            $(".hmain").live('mouseenter', function() {
                $(this).css("background-image", "url(images/menutwo.jpg)");
                $(this).children("a").css("color", "#FFFFFF");
                if ($.browser.mozilla) {
                    $(this).children("ul").children("li").children("a").css("width", "89px");
                }
                $(this).children("ul").show();
            }).live('mouseleave', function() {
                $(this).css("background-image", "url(images/menuone.jpg)")
                $(this).children("a").css("color", "#000000");
                $(this).children("ul").hide();
            });