Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts

    JS when hover off an element

    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).

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 Posts
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •