After hover: Сочетание с псевдоклассами | WebReference

Редактор Wix: добавление и настройка взаимодействия при наведении курсора | Справочный центр

Оживите свои ящики, повторители и элементы, добавив взаимодействия при наведении. Это эффекты, которые ваши посетители видят при наведении курсора на выбранные вами элементы.

Заставлять элементы появляться или исчезать, добавлять эффекты и менять цвета при наведении курсора. Вы также можете контролировать время ваших эффектов, чтобы максимизировать их потенциал.

Шаг 1 | Добавьте и создайте элемент

Взаимодействия при наведении курсора добавят веселья и движения на ваш сайт. Для начала добавьте либо коробку, либо повторитель из Добавить панель .

Щелкните параметр ниже, чтобы узнать больше о добавлении каждого элемента: 

Добавить поле

1. Нажмите значок Добавить в левой части редактора.
2. Нажмите Ящик .
3. Щелкните или перетащите поле, чтобы добавить его на страницу.
   Совет: Нажмите Hover Boxes и выберите поле, если вы предпочитаете использовать предварительно разработанное поле Hover Box.
4. (дополнительно) Создайте свою коробку и добавьте необходимые элементы.

Добавить повторитель

1. Щелкните значок Добавить в левой части редактора.
2. Нажмите Список .
3. Нажмите Повторители .
4. Нажмите или перетащите повторитель, чтобы добавить его на страницу.
5. (дополнительно) Создайте свой повторитель и добавьте элементы по мере необходимости.

Шаг 2 | Доступ к режиму наведения

После добавления и разработки элемента перейдите в режим наведения, чтобы начать добавлять взаимодействия. Здесь вы контролируете, что видят посетители, когда они наводят курсор на вашу коробку или ретранслятор.

Покажите мне, как

1. Выберите вашу коробку/ретранслятор в Редакторе.
2. В зависимости от вашего элемента выполните следующие действия для доступа к режиму наведения:
   • Поле: Нажмите на значок взаимодействия при наведении  .
   • Повторитель: Щелкните любой контейнер в повторителе и выберите значок Hover Interactions .
3. Нажмите Начать .

Шаг 3 | Добавьте взаимодействия при наведении к вашему элементу

В режиме наведения вы можете заставить элементы появляться или исчезать, а также добавлять интересные эффекты. Все происходит одновременно, когда посетители наводят курсор на вашу коробку или ретранслятор.

Выберите, что вы хотите сделать:

Добавить элементы, которые появляются при наведении курсора

1. Нажмите значок Добавить при наведении  в левом верхнем углу, чтобы добавить элементы, которые появляются при наведении.
2. Щелкните элемент, который вы хотите добавить в блок или повторитель.

Примечание: Не все элементы доступны для добавления в режим наведения.

Скрыть элементы при наведении

Чтобы элемент исчез при наведении на него курсора: 

1. Выберите элемент и нажмите Удалить на клавиатуре или нажмите значок Скрыть .
   Примечание: Вы можете скрыть определенные элементы или скрыть коробку/репитер целиком.
2. Щелкните значок Hidden on Hover в левом верхнем углу, чтобы получить доступ к списку скрытых элементов и управлять им.

Выберите эффект для элемента при наведении

Вы можете добавить эффект к любому элементу в вашем блоке или элементе-повторителе, включая сам блок/элемент-повторитель. Заставьте элементы увеличиваться, уменьшаться, вращаться или наклоняться в сторону.

Чтобы выбрать эффект:

1. Выберите ящик/репитер в вашем Редакторе.
2. Щелкните Выберите Эффект .
3. Выберите эффект из доступных вариантов.
   Совет: Выберите Combo 9Эффект 0012 для объединения нескольких эффектов. Например, вы можете заставить свой элемент расти и вращаться одновременно, используя этот эффект.
4. (Необязательно) Нажмите Настроить , чтобы настроить эффект в соответствии с вашими потребностями.

После выбора эффекта для элемента установите время его появления.

Чтобы установить время:

1. Выберите элемент в редакторе.
2. Щелкните значок синхронизации .
3. Используйте доступные параметры, чтобы установить время для вашего эффекта:
   • Продолжительность: Перетащите ползунок, чтобы выбрать продолжительность (в секундах) вашего эффекта после того, как посетители наведут курсор на элемент.
   • Задержка: Перетащите ползунок, чтобы выбрать задержку (в секундах) с момента, когда ваши посетители наводят курсор на элемент, до момента, когда они видят эффект.
   • Замедление: Выберите, как ваш элемент должен переходить из обычного состояния в эффект после того, как посетители наведут на него курсор (например, затухание эффекта).

Изменение дизайна блока при наведении

Вы можете редактировать дизайн блока в режиме наведения, чтобы изменить цвет фона, границы, углы и тень.

Примечание: Доступен только для контейнеров и не применяется к повторителям.

Чтобы изменить дизайн окна при наведении: 

1. Нажмите на поле в редакторе, чтобы выбрать его.
2. Щелкните вкладку Hover в верхней части окна.
3. Щелкните значок Design .
4. Выберите соответствующую вкладку слева на панели для редактирования дизайна:
   • Цвет и прозрачность заливки: Перетащите ползунок, чтобы настроить прозрачность фона, и щелкните поле цвета, чтобы изменить цвет.
   • Граница: Нажмите на поле цвета, чтобы изменить цвет, и перетащите ползунки, чтобы настроить границу Непрозрачность и цвет и Ширина .
   • Углы: Выберите угол, чтобы настроить округлость углов. Щелкните значок Link, чтобы сделать все углы одинаковыми.
   • Тень: Щелкните переключатель, чтобы включить тень, затем отредактируйте угол, расстояние, размер и другие параметры.

Совет: Вы также можете изменить дизайн определенных элементов внутри блока в режиме наведения.

Полностью измеренные, настраиваемые 3D-модели