#main
  #content
    .block
      h3(id="title") By jungle law, the Ghost Who Walks calls forth the power of <span>ten</span> tigers
  #formList
    input.foo1(value="Be Smart")
    button(class="btn").
      Be Awesome
    p
      span.status Mouse Position for 'page Coordinates'
    p
      span.status Mouse Position 'client X and Y Coordinates'
View Compiled
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

@color-base: #ddd;
@color-over: #fff;
@color-inner: #b7b7b7;
@space: 10px;
@paddingInner: 8px;

.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}

body {
  font-family: 'Lato', sans-serif;
  background-color: @color-base;
}
#main {
  #content {
    padding: @space;
    color: @color-over;
    text-align: center;
    .block {
      background-color: @color-over;
      color: @color-base;
      padding: @space;
      text-align: center;
      h3 {
        span {
          background-color: @color-base;
          color: @color-over;
          padding: @paddingInner;
          margin: 0 @space;
        }
      }
    }
}
#formList {
    background-color: @color-base;
    padding: @space;
    color: @color-inner;
    text-align: center;
      input, button{
        border:1px solid @color-inner;
        padding: @space;
        color: @color-inner;
        font-size: 10pt;
        .border-radius(20px);
      }
      .btn {
        background-color: @color-over;
      }
    }
  }
.active{
  background-color: #000 !important;
}
View Compiled
$(function() {

var i = 0;
$('#content').mouseover(function() {
    i += 1;
    $( this ).find('span').text( "mouse over x " + i );
  }).mouseout(function() {
    $( this ).find('span').text( "mouse out " );
  });
 
var n = 0;
$('#main').mouseenter(function() {
    n += 1;
    $( this ).find('input').val( "mouse enter x " + n ).parent(2).addClass('active');
  }).mouseleave(function() {
    $( this ).find('input').val( "mouse leave" ).parent(2).removeClass('active');
  });

$(document).mousemove(function(event) {
  var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
  var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
  $( "span.status:first" ).text( "( event.pageX, event.pageY ) : " + pageCoords );
  $( "span.status:last" ).text( "( event.clientX, event.clientY ) : " + clientCoords );
});
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js