mohamedmansour / hackathon-letsgo.io

letsgo.io - Photo Hack Day 4 project
http://letsgo.io
5 stars 6 forks source link

Click & hover events fire for transparent corner of cicles #46

Open justinormont opened 11 years ago

justinormont commented 11 years ago

Images/divs/etc in webkit always render html elements as a box. The circles are created by border-radius: 50% css. The areas out side the circle should not be clickable and should not create an on hover event.

Impact: user gets confused when they mean to click on one circle photo but are actually click on the transparent part of another circle photo.

Here's one solution: http://tympanus.net/codrops/2011/11/22/hover-and-click-trigger-circular-elements/

Another solution: http://stackoverflow.com/questions/9760692/button-border-radius-and-cursor