title: Trouble with the most basic of basic jQuery questions
body: <p>I am struggling to fathom why the following fiddle won't work? Just trying to add a class!</p>
  
  <p>Just starting out.</p>
  
  <p>Thanks, and please don't downgrade me... I know its basic.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="box"&gt;a&lt;/li&gt;
      &lt;li class="box"&gt;b&lt;/li&gt;
      &lt;li class="box"&gt;c&lt;/li&gt;
      &lt;li class="box"&gt;d&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>li {
      height:20px;
      width:20px;
      background-color:red;
      display:inline-block;
  }
  
  li .hover {
      background-color:blue;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('li').addClass('hover');
  </code></pre>
  
  <p><a href="http://jsfiddle.net/JGqAX/" rel="nofollow">http://jsfiddle.net/JGqAX/</a></p>