Is There an Opposite CSS Pseudo-Class to :Hover

Is there an opposite CSS pseudo-class to :hover?

Yes, use :not(:hover)

.child:not(:hover){
  opacity: 0.3;
}

.child {
  display: inline-block;
  background: #000;
  border: 1px solid #fff;
  width: 50px;
  height: 50px;
  transition: 0.4s;
}

.child:not(:hover) {
  opacity: 0.3;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS pseudo class for leaving hover

Put the transitions on a.squares not a.squares:hover

a.squares {
    -webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    -moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
a.squares:hover, a.squares:active {
    color: black;
    background-color: #E8E8E8;
    box-shadow: 0 0 12px black;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

I went through this exact thing when I was just leaving about transitions :)

What is the opposite of :hover (on mouse leave)?

If I understand correctly you could do the same thing by moving your transitions to the link rather than the hover state:

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

The definition of hover is:

The :hover selector is used to select elements when you mouse over
them.

By that definition the opposite of hover is any point at which the mouse is not over it. Someone far smarter than me has done this article, setting different transitions on both states - http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Confused by CSS pseudo-class :active

There is no concept of "active page" in CSS. In fact, the SitePoint Reference debunks this by saying:

The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.

What the spec says is right: :active simply styles elements that are activated, e.g. clicked (as in the example given) or in some other way triggered such that the browser starts navigating to the link's target.

Note that it doesn't just apply to <a> elements; it may apply to any non-form-input element that's clicked. For instance, you can do this:

p:active {
    color: red;
}

And any paragraph you click will flash its text red.

Note however that the exact definition and implementation is left up to the browser, but in general, you can rely on <a> elements having an activated state.

Pseudo Class 'nth-child()' not working with ':hover

That's because the a isn't the 2nd child - it is an only child of it's parent li. What you are looking for is the a child of the 2nd li element. You can get that like this:

li:nth-child(2) a{ color: green; }

Then for the hover, either of these work with the code in your question. It depends on what you want to target with the hover:

// When the <a> in the second li is hovered, change it's colour
li:nth-child(2) a:hover{ color: green; }

/* OR */ 

/* When the second li is hovered, change the colour of the <a> it contains */
li:nth-child(2):hover a{ color: green; }

Working Example (using different colours to show it working):

ul {
    background-color: white;
    text-decoration: none;
    padding: 0;
    margin: 0 auto;
}
ul li {
    margin: 0 2em;
    display: inline-block;
    padding: 0;
    list-style: none;
}
ul li a {
    text-decoration: none;
    color: black;
}

/* change colour of 2nd link */
li:nth-child(2) a{
    color: blue;
}

/* change colour of 2nd link on hover */
li:nth-child(2):hover a{
    color: green;
}

/* change colour of 3rd link on hover */
li:nth-child(3) a:hover{
    color: red;
}

<ul>
      <li><a href="#">Easy</a></li>
      <li><a href="#">Medium</a></li>
      <li><a href="#">Hard</a></li>
      <li><a href="#">Insane</a></li>
</ul>

Does CSS have a :blur selector (pseudo-class)?

There is no :blur pseudo-class in CSS.

The dynamic pseudo-classes, like other pseudo-classes and in fact all other selectors, represent states; they do not represent events or transitions between states in terms of the document tree. To wit: the :focus pseudo-class represents an element that is in focus; it does not represent an element that has just received focus, nor does there exist a :blur pseudo-class to represent an element that has just lost focus.

Similarly, this applies to the :hover pseudo-class. While it represents an element which has a pointing device over it, there is neither a :mouseover pseudo-class for an element that has just been pointed to nor a :mouseout pseudo-class for an element that has just been pointed away from.

If you need to apply styles to an element that is not in focus, you have two choices:

Use :not(:focus) (with less browser support):

input:not(:focus), button:not(:focus) {
    /* Styles for only form inputs and buttons that do not have focus */
}

Declare a rule that applies to any element regardless of its focus state, and override for elements that have focus:

input, button {
    /* Styles for all form inputs and buttons */
}

input:focus, button:focus {
    /* Styles for only form inputs and buttons that have focus */
}

Should the cursor property be set in a rule with or without the :hover pseudo-class?

Compatibility: IE6 and below only recognize the :hover pseudo class on a elements.

Is There an Opposite CSS Pseudo-Class to :Hover