⚡ Hover-эффекты без дёрганий Запилил для своей кастомной темы Firefox разворачиваемый по ховеру сайдбар с вкладками. Хочу рассказать про небольшую UX-хитрость — дополнительные хитбоксы. В общих чертах сайдбар работает так: курсор находится в определенной области, сайдбар разворачивается, курсор ушёл — сворачивается. Но прикол в том, что эту область необязательно ограничивать видимыми элементами — можно добавить невидимые зоны (в реалиях кастомизации firefox — через псевдоэлементы ::before и ::after, в обычном вебе — можно и отдельными элементами). В видео показываю две таких области. Первая — статическая, она страхует курсор от попадания в промежуток между элементами (без неё было так, что сайдбар начинал разворачиваться, но на полпути слегка дёргался). Вторая — динамическая, она создаёт «буферную зону» справа от сайдбара, чтобы он не сворачивался от малейшего выхода курсора за границы. Простой приём, но взаимодействие становится гораздо приятнее!