title: Button element in FF not applying hover background color on child elements
body: <p>I need to use semantic markup for an SEO code-friendly product using the button element, and schema attributes. So I used "span" elements to separate out the individual items. I did set the items I want to hover with background effects as display:block.</p>
  
  <p>Works in: Chrome, Safari on MAC. Chrome and IE on Windows.
  Does not work in FF in Mac or Windows: In FF, the background color hover effects are not being applied. Wat?</p>
  
  <p>Cannot use "ul, ol, li, div" or anything else that is not a "phrasing content" element inside button elements, see here: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button</a>.</p>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content" rel="nofollow">Click here for phrasing content allowed.</a></p>
  
  <p>Cannot use images. Cannot use Javascript.</p>
  
  <p><strong>EDIT:</strong> <em>"button:hover" and "button:hover .class" styles work fine. "button .class:hover" does NOT work in FF. I updated the fiddle to show what I expect on hover.</em></p>
  
  <p><strong>EDIT</strong> verified as a problem here: <a href="https://support.mozilla.org/en-US/questions/1014203" rel="nofollow">https://support.mozilla.org/en-US/questions/1014203</a></p>
  
  <p><strong>EDIT</strong> bug filed with Mozilla here: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=843003" rel="nofollow">https://bugzilla.mozilla.org/show_bug.cgi?id=843003</a></p>
  
  <p>jsfiddle here: <a href="http://jsfiddle.net/jbergloff/32jh2/" rel="nofollow">http://jsfiddle.net/jbergloff/32jh2/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;button class="product"&gt;
      &lt;span class="offer"&gt;
          &lt;span class="product-name"&gt;Product&lt;/span&gt;
          &lt;span class="product-price"&gt;$5.99&lt;/span&gt;
      &lt;/span&gt;
      &lt;span class="product-features"&gt;
          &lt;span class="list-item"&gt;HOVER ME&lt;/span&gt;
          &lt;span class="list-item"&gt;List Item 2&lt;/span&gt;
          &lt;span class="list-item"&gt;List Item 3&lt;/span&gt;
      &lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.product {
      display: block;
      border: none;
      background: green;
      color: #fff;
      position: relative;
      min-width:150px;
      cursor: pointer;
  }
  .product .offer {
      display: block;
      border: solid 1px green;
      margin: 5px;
      padding: 10px;
  }
  .product:hover .offer {
      border: solid 1px #FFF;
  }
  .product-name {
      font-size: 1.3em;
      display: block;
  }
  .product-price {
      display: block;
      font-size: 2em;
      font-weight: bold;
  }
  .product-features {
      display: block;
  }
  .product-features .list-item {
      display: block;
      text-align: center;
      line-height: 30px;
      font-style: italic;
      padding: 2px;
      height:auto; /* in case a feature needs to be on two lines, don't cut off or hide the text */
  }
  
  /* WAT: this doesn't work in FF */
  .product-features .list-item:hover {
      background: lightgreen;
      color: #000;
  }
  </code></pre>