Class tag removed but trigger still work

As shown below, the class tag 'nav_hover' has been removed. It is expected that the binding event handler 'hover' should be detached to the DOM.
However the trigger is still there even the aim li has no class named 'nav_hover'.






To solve the problem , we must use the binding method for furture elements.
$(document).on(event,selector,function);


In this senario, the code that works is :

$(document).on("mouseenter",".nav_hover",function(){
		$(this).css("background-color", "#ee8296");

	});
	$(document).on("mouseleave",".nav_hover",function(){
		$(this).css("background-color", "#fff");
	});

I have no idea how to combine 'hover' and 'on' together.
Well that does not matter as it works already.