Триггер для событий hover и click в круглом элементе
Использование псевдо класса :hover широко известно как классический способ реагирования на наведение курсора мыши на элемент. Проблема проявляется при задействовании свойства border-radius для получения круглых элементов - событие hover генерируется при наведении курсора мыши на описывающий прямоугольник, а не только для действительно видимой области.
В данном уроке мы разработаем вариант решения поставленной задачи. Будет создан плагин, который будет генерировать события ‘mouseenter’, ‘mouseleave’ и ‘click’ только для круглой формы элемента, а не для всего описывающего прямоугольника.
Как работает решение
В нашем примере мы создадим круг с эффектом для события hover. Структура разметки будет простой:
<a href="#" id="circle" class="ec-circle"> <h3>HOVER</h3> </a>
Со следующими стилями:
.ec-circle{ width: 420px; height: 420px; -webkit-border-radius: 210px; -moz-border-radius: 210px; border-radius: 50%; text-align: center; overflow: hidden; font-family:'Kelly Slab', Georgia, serif; background: #dda994 url(../images/1.jpg) no-repeat center center; box-shadow: inset 0 0 1px 230px rgba(0,0,0,0.6), inset 0 0 0 7px #d5ad94; transition: box-shadow 400ms ease-in-out; display: block; outline: none; }
Теперь определим класс для эффекта hover. Но данный класс будет простым, а не динамическим псевдо классом :hover. Идея заключается в применении данного класса с помощью кода jQuery, когда курсор мыши попадает внутрь круглой области элемента:
.ec-circle-hover{ box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), inset 0 0 0 20px #c18167, 0 0 10px rgba(0,0,0,0.3); }
Только для варианта с отключенным JavaScript мы добавим псевдо класс. Данный стиль можно найти в файле исходников noscript.css:
.ec-circle:hover{ box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), inset 0 0 0 20px #c18167, 0 0 10px rgba(0,0,0,0.3); }
JavaScript
Мы создадим простой плагин, который переопределяет три упомянутых ранее события. События будут применяться только для круглой формы:
$.CircleEventManager = function( options, element ) { this.$el = $( element ); this._init( options ); }; $.CircleEventManager.defaults = { onMouseEnter : function() { return false }, onMouseLeave : function() { return false }, onClick : function() { return false } }; $.CircleEventManager.prototype = { _init : function( options ) { this.options = $.extend( true, {}, $.CircleEventManager.defaults, options ); // Устнавливаем курсор по умолчанию лоя элемента this.$el.css( 'cursor', 'default' ); this._initEvents(); }, _initEvents : function() { var _self = this; this.$el.on({ 'mouseenter.circlemouse' : function( event ) { var el = $(this), circleWidth = el.outerWidth( true ), circleHeight = el.outerHeight( true ), circleLeft = el.offset().left, circleTop = el.offset().top, circlePos = { x : circleLeft + circleWidth / 2, y : circleTop + circleHeight / 2, radius: circleWidth / 2 }; // Сохраняем тип курсора var cursor = 'default'; if( _self.$el.css('cursor') === 'pointer' || _self.$el.is('a') ) cursor = 'pointer'; el.data( 'cursor', cursor ); el.on( 'mousemove.circlemouse', function( event ) { var distance = Math.sqrt( Math.pow( event.pageX - circlePos.x, 2 ) + Math.pow( event.pageY - circlePos.y, 2 ) ); if( !Modernizr.borderradius ) { // Внутри элемента/круга el.css( 'cursor', el.data('cursor') ).data( 'inside', true ); _self.options.onMouseEnter( _self.$el ); } else { if( distance <= circlePos.radius && !el.data('inside') ) { // Внутри элемента/круга el.css( 'cursor', el.data('cursor') ).data( 'inside', true ); _self.options.onMouseEnter( _self.$el ); } else if( distance > circlePos.radius && el.data('inside') ) { // Внутри элемента / вне круга el.css( 'cursor', 'default' ).data( 'inside', false ); _self.options.onMouseLeave( _self.$el ); } } }); }, 'mouseleave.circlemouse' : function( event ) { var el = $(this); el.off('mousemove'); if( el.data( 'inside' ) ) { el.data( 'inside', false ); _self.options.onMouseLeave( _self.$el ); } }, 'click.circlemouse' : function( event ) { // Разрешаем событие click только внутри круга var el = $(this); if( !el.data( 'inside' ) ) return false; else _self.options.onClick( _self.$el ); } }); }, destroy : function() { this.$el.unbind('.circlemouse').removeData('inside, cursor'); } };
Когда курсор мыши заходит в квадрат, описывающий наш круг, событие ‘mousemove’ привязывается к элементу, и мы можем отслеживать дистанцию от курсора мыши до центра круга. Если расстояние больше радиуса, то генерировать событие hover рано.
Как только дистанция становится меньше радиуса, значит курсор мыши находится в круге и пора генерировать событие ‘mouseenter’.
Также, событие 'click' может генерироваться только когда курсор мыши находится в круге.
В примере плагин применяется для соответствующего элемента. Класс hover добавляется по событию ‘mouseenter’ и удаляется по событию ‘mouseleave’.
$('#circle').circlemouse({ onMouseEnter : function( el ) { el.addClass('ec-circle-hover'); }, onMouseLeave : function( el ) { el.removeClass('ec-circle-hover'); }, onClick : function( el ) { alert('clicked'); } });
Помните, что мы определили "нормальный" псевдо класс hover в файле noscript.css, который применяется при отключенном JavaScript.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/TVMZxeY906k/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.