如何实现Object的悬停状态

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？

由于