Применение к элементу псевдо-класса a :hover широко распространенно под термином «hovering». С появлением параметра border-radius тут же возникла проблема в том, что эффект при наведении кажется не реалистичным, тем более, что событие запускается тогда, когда курсор мыши входит в сам блок с элементом, а не на его видимую область. Это перерастает в очень большую проблему, если мы хотим использовать круглые элементы посредством 50%-ного значения параметра border-radius.

Сегодня мы хотим поделиться с вами действенным решением, которое поможет вам решить данную проблему. Мы разработаем плагин, который будет обрабатывать события «mouseenter», «mouseleave» и «click», и запускать их только тогда, когда курсор мыши достигает видимой области элемента.

Источник