hover - オブジェクトのホバー状態を実装する方法

Question

Click 用に実装されたメニューのコードがあります。

function DropDown(el) {
    this.dd = el;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;

        var loc = window.location.pathname;

        var filename = loc.match(/([^\/]+)(?=\.\w+$)/)[0];

         console.log("sssss" + $(this).attr("id"));
         obj.dd.on('click', function(event){

            console.log($(this).attr("id"));
            if(!($(this).hasClass("active")) && ( $(this).attr("id")) === filename) {
                 console.log("Hiding");
                $(this).toggleClass('active');
                event.stopPropagation();
            }
        }); 
    }
}

$(function() {

   var dd1 = new DropDown( $('#value') );
    var dd2 = new DropDown( $('#diagnostics') );
    var dd3 = new DropDown( $('#design') );
    var dd4 = new DropDown( $('#delivery') );

    //$('.wrapper-dropdown-5').on('click', function(e){ console.log(e); });

    $(document).click(function() {
        // all dropdowns
        $('.wrapper-dropdown-5').removeClass('active');
    });

});

obj.dd.on ('click', function(event){が表示される場合、クリック アクションが傍受されている場所です。しかし、ホバー状態を実装したいのですが、驚いたことに、動作していません。使用してみましたホバー、マウスオーバー、マウスアウトがありますが、何も機能せず、クリックのみが機能しています。

何が問題なのか、またはこのシナリオで Hover をどのように実装できるのか考えていますか?

ありがとう