hover not working on <button> inside div, works outside
<p>This does not give me a hover state for my  element:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.button:hover {
  opacity: .7;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="banner"&gt;
  &lt;div id="frame1"&gt;
    &lt;p id="txt1" class="white droid"&gt;Some dogs&lt;/p&gt;
    &lt;p id="txt2" class="white droid"&gt;Don't like to bark&lt;/p&gt;
    &lt;button class="button"&gt;Reverse!&lt;/button&gt;
  &lt;/div&gt;  
  &lt;div id="border"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>If I change the HTML to the below, the button does give me a hover state:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.button:hover {
  opacity: .7;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="banner"&gt;
  &lt;div id="frame1"&gt;
    &lt;p id="txt1" class="white droid"&gt;Some dogs&lt;/p&gt;
    &lt;p id="txt2" class="white droid"&gt;Don't like to bark&lt;/p&gt;
  &lt;/div&gt;   
  &lt;div id="border"&gt;&lt;/div&gt;
  &lt;button class="button"&gt;Reverse!&lt;/button&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Note: the DIVs containing the button are just set to absolute positioning.</p>

<p>Is there something I need to do to get hover state with the button in a nested DIV?</p>