I love feedback on mouse hover. It’s a simple, subtle thing that adds a lot of polish to a user interface. I was browsing the Humble Store and liked how its cards have a ‘dual-hover’ behaviour - the ‘Buy’ button changes when the cursor enters any part of the card, and changes again when it enters the button itself. This is really easy to do, but uses some CSS syntax I wasn’t aware of.

The ‘element:hover’ and ‘element child’ selector patterns can be combined into ‘element:hover child’ to effect the styling of a child when the mouse enters the parent. This causes the color change on the button, and JavaScript listens for onMouseOver and onMouseOut on the button to change its innerHTML.

The JavaScript can be found here. Line 28 uses an idiom I really like. The ‘games’ variable is from an attached JSON file and contains an array of game info objects. The map function iterates over the objects and creates a new Box element for each one, passing the game info as a prop. It’s nice and succinct!