鼠标悬停旋转

Question

I have this function but there are two issues I can't solve, first one is that the mouse action is set on all the screen and I want it to be when hover over the dive "ehab" only, not when I move mouse over screen, the other issue is that when I have more than one div , the function works only on the first one ... kindly advise me

    /*
        By     : Ofelquis
        Twitter: @felquis
        Blog   : tutsmais.com.br

        Simples implementação ;)
    */
    !(function ($doc, $win) {
        var screenWidth = $win.screen.width / 2,
            screenHeight = $win.screen.height / 2,
            $ehab = $doc.querySelectorAll('#ehab')[0],
            validPropertyPrefix = '',
            otherProperty = 'perspective(600px)';

            if(typeof $ehab.style.webkitTransform == 'string') {
                validPropertyPrefix = 'webkitTransform';
            } else {
                if (typeof $ehab.style.MozTransform == 'string') {
                    validPropertyPrefix = 'MozTransform';
                }
            }

        $doc.addEventListener('mousemove', function (e) {
            // vars 
            var centroX     = e.clientX - screenWidth,
                centroY     = screenHeight - (e.clientY + 13),
                degX   = centroX * 0.1,
                degY   = centroY * 0.1

            // Seta o rotate do elemento
            $ehab.style[validPropertyPrefix] = otherProperty + 'rotateY('+ degX +'deg)  rotateX('+ degY +'deg)';
        });
    })(document, window);

Answer 1

The first problem, ( I want it to be when hover the div "#ehab" ), you need the attach the mousemove event to your div:

$ehab.addEventListener('mousemove', function (e) {
     //You code here.
});

The second problem, ( when I have more than one div , the function works only on the first one ), you can't have duplicated IDs on your DOM tree, change the selector to a class, for example, .ehab then you have to loop through the matched elements, please try this code:

 /* By : Ofelquis Twitter: @felquis Blog : tutsmais.com.br Simples implementação ;) */ !(function($doc, $win) { var $ehabDIVs = $doc.querySelectorAll('.ehab'), otherProperty = 'perspective(600px)'; for (var i = 0; i < $ehabDIVs.length; ++i) { var $ehab = $ehabDIVs[i]; $ehab.addEventListener('mousemove', function(e) { // vars var centroX = (e.pageX - this.offsetLeft) - this.offsetWidth/2, centroY = this.offsetHeight/2 - (e.pageY-this.offsetTop), degX = centroX * 0.1, degY = centroY * 0.1 if(this._leave) clearInterval(this._leave); // Seta o rotate do elemento this.style.transform = otherProperty + 'rotateY(' + degX + 'deg) rotateX(' + degY + 'deg)'; }); $ehab.addEventListener('mouseleave', function(e) { var self = this; this._leave = setTimeout(function() { self.style.transform = 'rotateY(0deg) rotateX(0deg)'; }, 250); }); } })(document, window); 

 .ehab { width:300px; height:300px; background-color:red; margin:15px; float:left; transition: transform 0.15s ease; } 

 <div class="ehab">First Div</div><div class="ehab">Second Div</div> 

Good Luck Ismaiel.