js实现hover样式，适用于只需要为单个元素添加少量样式的情况

1.简介

在网页开发中一个元素的鼠标悬停样式常常由伪类:hover来控制，而当我们用js生成一个DOM元素时想要给它添加hover样式的话就显得比较麻烦，常规方法是先给它添加一个类名，然后往页面中新增一个style便签，标签内定义伪类hover的样式。

2.代码实现

这里采用mousenter和mouseleave的监听来实现hover样式。代码如下:

var dc = {
	//设置元素的hover样式
	hoverStyle: function(eles,styles){
		var $eles = $(eles);
		$.each($eles,function(index,ele){
			var $ele = $(ele);
			//存储旧样式
			var obj = {};
			$.each(styles,function(key,value){
				obj[key] = $ele.css(key) || $ele[0].style[key];
			});
			if(typeof $ele.data('normalStyles') === "object"){
				$.extend(obj,$ele.data('normalStyles'));
			}
			//存储新样式
			if(typeof $ele.data('hoverStyles') === "object"){
				styles = $.extend($ele.data('hoverStyles'),styles);
			}
			$ele.data('hoverStyles',styles);
			$ele.data('normalStyles',obj);
			//绑定点击事件
			$ele.off("mousee