マウスが領域の上に被ったときのメソッド

Question

サイトのトップページに伸縮するメニューバーを実装する為にmetisMenuというプラグインを使用しています．
(参考URL：http://mm.onokumus.com/)

このプラグインにより，メニューのカテゴリをクリックした際にメニューが伸び，サブメニューが表示される機能を実装しております．

この’クリック’という操作ではなく，マウスをカテゴリーに’乗せた瞬間’に行いたいと考えております．
サイトではプラグインの利用の為にmetisMenu.cssとmetisMenu.jsの2つのファイルを読み込んでいるので，それらを覗いてみたところ，jsファイルの一部にclickという単語が1か所だけ使用されているのを見つけました．

この部分をaboveやoverと変更してはみたのですが，目的の動作には至っておりません．
そもそもこのファイルに記載された処理内容が今一つ理解できません．

なにか参考になる情報がありましたら，ぜひ教えていただきたいです．
どうぞよろしくお願いいたします．

ーーー metisMenu.jsの一部 ーーー

Plugin.prototype = {
init: function () {

        var $this = $(this.element),
            $toggle = this.settings.toggle;

        if (this.isIE() <= 9) {
            $this.find("li.active").has("ul").children("ul").collapse("show");
            $this.find("li").not(".active").has("ul").children("ul").collapse("hide");
        } else {
            $this.find("li.active").has("ul").children("ul").addClass("collapse in");
            $this.find("li").not(".active").has("ul").children("ul").addClass("collapse");
        }
        
        $this.find("li").has("ul").children("a").on("**click**", function (e) {
            e.preventDefault();

            $(this).parent("li").toggleClass("active").children("ul").collapse("toggle");

            if ($toggle) {
                $(this).parent("li").siblings().removeClass("active").children("ul.in").collapse("hide");
            }
        });
    },

ーーーーーーーーーーーーーーーーー

Answer 1

はじめに私が記載したプログラムの click という部分を mouseenter とすることで目的の動作となりました．

そもそもこのプログラムはどの言語で記載されているのかわからず，メソッドを調べることすらできていなかったのですが，SuhnsukeIzuiさん の解答にあった mouseenter でググった所，Jqueryのメソッドであることがわかりました．

Answer 2

clickでは動作しなくてもいいのなら

            $this.find("li").has("ul").children("a").on("click", function (e) { 
                e.preventDefault(); 

                $(this).parent("li").toggleClass("active").children("ul").collapse("toggle"); 

                if ($toggle) { 
                    $(this).parent("li").siblings().removeClass("active").children("ul.in").collapse("hide");
                } 
            }); 

の部分を

$this.find("li").has("ul").children("a").on({
    "mouseenter" : function (e) { 
        e.preventDefault(); 

        $(this).parent("li").addClass("active").children("ul").collapse("toggle"); 

        if ($toggle) { 
            $(this).parent("li").siblings().removeClass("active").children("ul.in").collapse("hide");
        } 
    },
    "mouseleave" : function(e) {
        e.preventDefault(); 

        $(this).parent("li").removeClass("active").children("ul").collapse("toggle");
    }
}); 

とすればいいかと思います。
動作未検証ですので、ご注意ください。

Comments

[numa]

SuhnsukeIzuiさん
回答ありがとうございます．
早速試したところ，マウスを載せた際にリストが伸び，マウスを離した際にリストが縮む動作になりました．

しかし，メインメニューにマウスを載せてサブメニューを表示するところまでは良いのですが，サブメニューをクリックするためにはメインメニューからサブメニューにマウスを移動させる必要があり，その際にメニューが縮んでしまい，あと少し修正が必要なようです．

このプログラムはJqueryの処理が記載されているのですよね？
もう少し自分でも調べて見ようと思います．