JS when hover off an element

johnsmith153 · 09-13-2012, 07:07 AM

I am using JS to add a class to an element when it is hovered over.

I also want to remove that class when the element is no longer hovered over.

How do you do this?

I also want to ensure it works on touch devices as well as with the mouse.

I don't want to use jQuery (or any library).

vwphillips · 09-13-2012, 12:50 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

.ball {
  width:50px;height:50px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);
}

.active {
  background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Two.gif);
}

/*]]>*/
</style>
</head>
<div class="ball" ></div>
<br />
<div class="ball" ></div>

<script type="text/javascript">
/*<![CDATA[*/

function zxcBall(cls,acls){
  var reg=new RegExp('\\W'+cls+'\\W'),els=document.getElementsByTagName('DIV'),ary=[],z0=0;
  for (; z0<els.length;z0++){
   if(reg.test(' '+els[z0].className+' ')){
    ary.push([els[z0],els[z0].className,els[z0].className+' '+acls])
   }
  }
  this.addevt(document,'mousemove','swap',ary);
}

zxcBall.prototype={

 swap:function(e,ary){
  var s=this.ws(),mse=this.mse(e),p,z0=0;
  mse[0]+=s[0];
  mse[1]+=s[1];
  for (;z0<ary.length;z0++){
   p=this.pos(ary[z0][0]);
   ary[z0][0].className=ary[z0][mse[0]>p[0]&&mse[0]<p[0]+ary[z0][0].offsetWidth&&mse[1]>p[1]&&mse[1]<p[1]+ary[z0][0].offsetHeight?2:1];
  }
 },

 ws:function(){
  if (window.innerHeight) return [window.pageXOffset,window.pageYOffset];
  else if (document.documentElement.clientHeight) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
  return [document.body.scrollLeft,document.body.scrollTop];
 },

 mse:function(e){
  if (window.event){
   var docs=[document.body.scrollLeft,document.body.scrollTop];
   if (!document.body.scrollTop){
    docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
   }
   return [e.clientX+docs[0],e.clientY+docs[1]];
  }
  return [e.pageX,e.pageY];
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

// var e=window.event||arguments.callee.caller.arguments[0]

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 }

}



new zxcBall('ball','active');

/*]]>*/
</script>
<body>

</body>

</html>