title: CSS hover not working for nested class
body: <p>Can someone explain why 'hover' is not working for my css?  I would like the action of hovering over the play button to change the mouse cursor to 'pointer'.</p>
  
  <p>jsfiddle here: <a href="http://jsfiddle.net/2vqsA/5" rel="nofollow">http://jsfiddle.net/2vqsA/5</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"&gt;
  &lt;body&gt;
      &lt;div class="imageframe"&gt;
          &lt;img name="slideImg" src="someImage.jpg" width=500 height=375 border=0&gt;&lt;/img&gt;
          &lt;div class="animcontrol"&gt;
              &lt;table cellpadding='5'&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;div class="play" onclick="playAnim();"&gt;&lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.imageframe {
  position: relative;
  z-index: -1;
  max-width: 35em;
  max-height: 60em;
  padding: 0.5em 0.5em 0.5em 0.5em;
  background-color:rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
  filter:alpha(opacity=40);
  /* For IE8 and earlier */
  }
  .animcontrol {
  position: relative;
  min-width: 5%;
  max-width: 12em;
  max-height: 5em;
  padding: 0.2em 0.2em 0.2em 0.2em;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  z-index: 100;
  }
  .play:before {
  font-family: FontAwesome;
  font-size: 24px;
  content:"\f04b";
  color: rgba(84, 84, 90, 1);
  }
  .imageframe:hover .play{
  cursor: pointer;
  }
  </code></pre>
  
  <p>Thanks for any help or suggestions.</p>