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？

谢谢