Hover and Click Trigger for Circular Elements with jQuery

On elements with a border radius of 50% (which makes an element appear as a circle), the hover event gets triggered on mousing over the element itself which is its rectangular shape (see dashed outline).

We'll apply a hover class and be able to click it only when entering the circle itself.

Hover over the circle to see the effect.