How to implement a Hover state for an Object - hover

Question

I have a code for a menu which is implemented for 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');
});
});
If you see obj.dd.on('click', function(event){, that is where the click action is being intercepted. But I want to implement hover state, and to my surprise, it is not working, I tried using hover, mouseover and mouseout there, but nothing works. Only click is working.
Do you have any idea what might be the problem or how could I implement Hover in this scenario?
Thanks