CodePen

HTML

            
              <div id="area" class="top left">
  <p>Hover over top, bottom, left or right to see the effect.</p>
  <p>You are in the <span id="y"></span> <span id="x"></span> region!</p>
</div>
            
          
!
via HTML Inspector

CSS

            
              html {
  font: 300 100%/1.5 Ubuntu;
}

#area {
  width: 30em;
  height: 20em;
  padding: 1em;
  border: 1px solid #ccc;
  margin: 0 auto;
}

.top    { background: #fff; }
.bottom { background: #333; }
.left   { color: #8495a5;   }
.right  { color: #a7cd80;   }

.top    #y:before { content: 'top';    }
.bottom #y:before { content: 'bottom'; }
.left   #x:before { content: 'left';   }
.right  #x:before { content: 'right';  }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var area = document.getElementById('area');

area.addEventListener('mousemove', function(e) {
  if (e.offsetY < 160) {
    this.className = 'top';
  } else {
    this.className = 'bottom';
  }
  if (e.offsetX < 240) {
    this.className += ' left';
  } else {
    this.className += ' right';
  }
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................