Check out this jsfiddle that demonstrates the issue I'm facing: http://jsfiddle.net/snorthway/TP55F/6/
While it functions properly in Firefox, in Chrome when you hover over it, the blue square spills outside the circle and remains that way even after moving the mouse away. On hover, all I'm doing is adding a class to enhance the colors.
I attempted using !important with overflow:hidden, but no luck. I also experimented with setting position:relative as proposed in this answer. I incorporated both of these modifications within the .hov class (which is applied on hover and removed when not hovered), yet nothing changed.
Addtionally, a strange observation is that inspecting the element in Chrome rectifies the overflow issue. For instance, if I have the inspector open, move my cursor over the circle, then shift it into the inspector panel, the overflow problem vanishes.