동그란 엘리먼트에 hover, click 시 효과 주기

동그란 엘리먼트에 hover, click 시 효과를 줄 수 있는 demo 입니다. 이렇게 말씀으로 드리면 어떤 모양일지 상상이 잘 안가실 것 같은데 직접 보시면 좋을 것 같습니다.

Hover and Click Trigger for Circular Elements with jQuery
[데모보기]

동그란 엘리먼트는 CSS border-radius를 50%로 주면 만들 수 있습니다. 원래는 네모난 엘리먼트지만 border-radius로 인해 동그랗게 보이게 되는 것입니다.

여기에서 마우스 hover나 click시 문제가 생길 수 있습니다. 사용자에게 시각적으로는 동그랗게 보이게 만들어놨지만 실제로 엘리먼트는 네모낳게 생겼습니다. 따라서 사용자가 네모난 부분의 모서리쯤에 마우스를 hover하거나 click 했을 때 아직 동그란 원안에 마우스 커서가 안들어왔지만 이벤트는 발생하게 됩니다. 보이는 것과 실제가 달라지는 것이지요. 이것은 사용자에게 불편을 초래할 수 있기 때문에 거기에 대한 처리가 필요합니다.

이 데모에서는 그 문제를 이런식으로 처리했습니다. 사용자의 마우스 커서 위치와 원의 중심점의 위치 사이의 거리가 원의 반지름보다 크면 원 밖에 있다고 판단하여 이벤트를 발생시키지 않은 것입니다. 자세한 내용은 위 링크에 설명이 되어 있습니다.