Ask DN: How can I represent active and hover states in the following design?

over 6 years ago from , Senior Software Engineer at Dollar Shave Club

First of all, please excuse me if this question is out of line for the likes of DN. I figured with so many eyes here, I'd hope to get some constructive feedback.

Here is the design: http://i.imgur.com/minCVzE.jpg

I've been working on a math worksheet generator for a while, and there are a few key features to interacting with it:

  1. Clicking on a section of problems highlights the section with a light yellow background, abysmal in my opinion.

  2. Hovering over a problem within an active section fades in a 2px black underline on the problem, kind of ugly in my opinion too...

What alternatives do you think would work best to represent these states for a document editor akin to Google Docs (or not for that matter)? Any insight/feedback is greatly appreciated!