Circular Element with Hover Effect

Hover and click trigger for circular elements with jQuery

In this tutorial we’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box. With these steps we'll fix any problems with applying a :hover pseudo-class to an element widely known as the classic “hovering” over an element on a web page.

The problem that arises with the introduction of the border-radius property is the non-realistic triggering of the hover event when entering the bounding box of the element and not just the actual visible area. This becomes extreme when we create a circle by setting the border-radius of a square to 50% (half of its outer width and height).

Daniela Vaseva

Daniela Vaseva Daniela is writing tutorials, news, newsletters, and update emails for the DMXzone specialising in the sphere of electronic processing, analysis and publication of texts, and interested in the development of new Internet technologies and problems related to the cyberculture and net literature. She has a bachelor's degree in Bulgarian philology, and a master's degree in computational linguistics.

See All Postings From Daniela Vaseva >>

Comments

Be the first to write a comment

You must me logged in to write a comment.