Ensuring that my product is SEO-friendly, I incorporated semantic markup using the button element and schema attributes. To separate individual items, I utilized "span" elements while setting hover effects on selected items by adding display:block.
This approach was successful in Chrome and Safari on MAC, as well as Chrome and IE on Windows. However, there were issues in Firefox on both Mac and Windows where the background color hover effects did not function as expected.
Constraints dictated that only "phrasing content" elements could be used inside button elements, ruling out options like "ul, ol, li, div". More information on allowed phrasing content can be found here.
Further limitations included restrictions on images and Javascript usage.
EDIT: Upon investigation, it was discovered that "button:hover" and "button:hover .class" styles performed correctly, but "button .class:hover" did not work in Firefox. An updated fiddle illustrates the expected behavior on hover.
An issue similar to this was verified here, leading to a bug report being filed with Mozilla here.
For reference, the JSfiddle showcasing the HTML and CSS can be accessed here:
HTML:
<button class="product">
<span class="offer">
<span class="product-name">Product</span>
<span class="product-price">$5.99</span>
</span>
<span class="product-features">
<span class="list-item">HOVER ME</span>
<span class="list-item">List Item 2</span>
<span class="list-item">List Item 3</span>
</span>
</button>
CSS:
.product {
// CSS styles go here
}
.product .offer {
// Additional styling for offer section
}
// Continue defining CSS classes as needed