DOMElement Selector

by Paulo Ávila

HTML

<body>
  <div id="content">
      <p>move <strong>your</strong> mouse!</p>
    <div class="box" style="background:#f1f1f1;"></div>
    <div class="box" style="background:#eee;"></div>
    <div class="box" style="background:#ddd;"></div>
    <div class="box" style="background:#bbb;"></div>
    <div class="box" style="background:#999;"></div>
  </div>
</body>

CSS

* { margin:0; padding:0; }
body { background:#999; }  .box { width:200px; height:200px; margin:20px; }
strong { font-weight: bold; }
#content { background:#fff; width:600px; padding:30px; margin:0 auto; height:1500px; }  
.outer { display:none; position:absolute; z-index:65000; border:1px solid red; }
.box { width:100px; height:100px; margin:10px; }

.mouseOn{
  background-color: #bcd5eb !important;
  outline: 2px solid #5166bb !important;
}

JavaScript

prevElement = null;
document.addEventListener('mousemove',
    function(e){
        var elem = e.target || e.srcElement;
        if (prevElement!= null) {prevElement.classList.remove("mouseOn");}
        elem.classList.add("mouseOn");
        prevElement = elem;
    },true);