CSS Hover: how to deal with multiple images for the "hover on everything but" CSS trick?

Question

Here's the example code using a unique CSS trick: http://dabblet.com/gist/39d1dec4f1be8c01bb25010dda986922

The only thing I want to change:
Change the three "A" image buttons to image button "A", image button "B" and image button "C".

How can I accomplish this using CSS without linking images inline?

Answer 1

The answer is simply to link each image: A,B,C in a separate <li> in CSS. Then use a div that surrounds the whole <ul> in the HTML to replace the images in the "hover on everything but" buttons.

You can see the solution here: http://dabblet.com/gist/08d37a65488d85c290887be76a33a2ad