A CodePen by damienklinnert. transition colors - using hover events and transitions to change the background color of an element - as seen on codeschool.com.

index.html

<h1>move your mouse over the words</h1>
<a href="#light">one</a>
<a href="#dark">two</a>

script.coffee

$ ->
  light = $ '[href="#light"]'
  dark  = $ '[href="#dark"]'
  bg = $ 'body'
  light.mouseover (ev) ->
    bg.css 'background-color', '#FF2151'
    ev.preventDefault()
  dark.mouseover (ev) ->
    bg.css 'background-color', '#FFC629'
    ev.preventDefault()

style.css

body {
  background-color: #FF2151;
  -webkit-transition: background-color 1s ease;
  -moz-transition: background-color 1s ease;
  -o-transition: background-color 1s ease;
  transition: background-color 1s ease;
}

h1 {
  text-align: center;
  color: #fff;
  font-size: 1.25em;
  font-weight: normal;
}

a {
  position: absolute;
  top: 10%;
  padding: 1em;
  font-size: 1.875em;
  color: #fff;
  text-decoration: none;
}

a[href="#light"] {
  left: 10%;
  background-color: #FF2151;
}

a[href="#dark"] {
  right: 10%;
  background-color: #FFC629;
}