---
url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B5%D1%84%D0%B5%D0%BA%D1%82%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%BD%D1%8F'
title: 'Змусьте елементи реагувати на наведення | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:59:19+00:00'
updated: '2026-10-24T20:03:43+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Змусьте елемент змінюватися, коли відвідувач наводить на нього курсор: блок, що піднімається, кнопка, що темнішає, зображення, що яскравішає. Ви встановлюєте спокійний вигляд на панелі Style, а вигляд під час наведення на її двійнику, панелі Hover style. У прикладі будується сіре текстове поле, що піднімається під час наведення.
  Відео надає текстовому полю фон, відступи й тінь, що глибшає під час наведення.
tags:
  - 'Design guides'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T20:03:43+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Змусьте елементи реагувати на наведення'
      description: |-
        Змусьте елемент змінюватися, коли відвідувач наводить на нього курсор: блок, що піднімається, кнопка, що темнішає, зображення, що яскравішає. Ви встановлюєте спокійний вигляд на панелі Style, а вигляд під час наведення на її двійнику, панелі Hover style. У прикладі будується сіре текстове поле, що піднімається під час наведення.
        Відео надає текстовому полю фон, відступи й тінь, що глибшає під час наведення.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T19:59:19+0000'
      dateModified: '2026-10-24T20:03:43+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B5%D1%84%D0%B5%D0%BA%D1%82%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%BD%D1%8F'
      articleSection: 'Посібники з дизайну'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B5%D1%84%D0%B5%D0%BA%D1%82%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%BD%D1%8F'
      description: |-
        Змусьте елемент змінюватися, коли відвідувач наводить на нього курсор: блок, що піднімається, кнопка, що темнішає, зображення, що яскравішає. Ви встановлюєте спокійний вигляд на панелі Style, а вигляд під час наведення на її двійнику, панелі Hover style. У прикладі будується сіре текстове поле, що піднімається під час наведення.
        Відео надає текстовому полю фон, відступи й тінь, що глибшає під час наведення.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/uk'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: uk
---
[Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Створення сторінок](/uk/hc/documentation/learn-dxpr-builder/build) /[Стилізація елементів](/uk/hc/documentation/learn-dxpr-builder/element-settings) /[Посібники з дизайну](/uk/hc/documentation/learn-dxpr-builder/design/overview) # Змусьте елементи реагувати на наведення.

 Вивчення DXPR BuilderСтворення сторінокСтилізація елементівПосібники з дизайну

   ## In this guide

 Related guides

- [Анімація елементів під час прокручування, наведення чи натискання](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%BD%D1%96%D0%BC%D0%B0%D1%86%D1%96%D1%8F)
- [Стилізуйте свої картки](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%81%D1%82%D0%B8%D0%BB%D1%96-%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BA)

Змусьте елемент змінюватися, коли відвідувач наводить на нього курсор: блок, що піднімається, кнопка, що темнішає, зображення, що яскравішає. Ви встановлюєте спокійний вигляд на панелі **Style**, а вигляд під час наведення на її двійнику, панелі **Hover style**. У прикладі будується сіре текстове поле, що піднімається під час наведення.

Відео надає текстовому полю фон, відступи й тінь, що глибшає під час наведення.

  ## Побудова текстового поля

1. Натисніть **+** в області вмісту й виберіть **Section** на вкладці **Layout**.
2. Натисніть **+** на розділі й виберіть **Row**.
3. Натисніть піктограму сітки на рядку, виберіть плитку з трьома рівними колонками й натисніть **Save**.
4. Натисніть **+** у першій колонці й виберіть **Text** на вкладці **Content**.
5. Введіть «Open day», установіть для нього **Heading 3** і додайте один рядок під ним.

## Установлення спокійного стилю

1. У тому самому діалоговому вікні налаштувань відкрийте панель **Style**.
2. Виберіть світло-сірий **Background**.
3. У блоковій моделі встановіть верхній, лівий і нижній боки **Padding** у значення 24.
4. Установіть **Border radius** у значення 8.
5. Установіть **Drop shadow** у значення 1.

## Установлення стилю наведення

1. Відкрийте панель **Hover style**.
2. Установіть **Drop shadow** у значення 4.
3. Натисніть **Save**.
4. Натисніть **Save** на панелі інструментів DXPR Builder.
5. Відкрийте меню перегляду, піктограму ока на панелі інструментів, і виберіть **Preview**.
6. Пересуньте вказівник на текстове поле.

## Що ви бачите

У спокої текстове поле сіре із заокругленими кутами й легкою тінню. Коли вказівник його досягає, тінь глибшає і поле ніби піднімається; коли вказівник іде, воно осідає назад. Зміна тіні анімована. Інші зміни під час наведення, наприклад новий колір, перемикаються одразу.

## Налаштування

Панель **Hover style** містить ті самі поля, що й панель **Style**. Порожнє поле зберігає спокійне значення.

| Поле | Застосування під час наведення |
|---|---|
| **Margin**, **Border**, **Padding** (блокова модель) | Зсуньте, обрамуйте або збільште елемент |
| **Font color** | Виділення тексту |
| **Border color** | Підкреслення рамки |
| **Background** | Зміна заливки |
| **Background image**, **Background style**, **Background position** | Заміна або пересування зображення |
| **Border style** | Показ рамки |
| **Font size** | Збільшення тексту |
| **Border radius** | Заокруглення кутів |
| **Opacity** | Проявлення або затемнення елемента |
| **Drop shadow** | Додавання глибини, від 1 до 5 |

## Типові шаблони

- **Підняття картки**: **Drop shadow** 1 у **Style**, 4 у **Hover style**.
- **Проявлення зображення**: **Opacity** 0,7 у **Style**, 1 у **Hover style**.
- **Зміна кольору кнопки**: темніший **Background** у **Hover style**.
- **Виділення рамки**: **Border style** **Solid** зі світлим **Border color** у **Style**, акцентний **Border color** у **Hover style**.

## Якщо ви не бачите ефекту

- **Текстове поле не змінюється, коли ви наводите на нього курсор.** Значення наведення дорівнює спокійному значенню, або ви помилково встановили його на панелі **Style**. Відкрийте **More** > **Settings** і підвищте **Drop shadow** на панелі **Hover style**.
- **Ефект важко оцінити під час редагування.** У режимі редагування елемент також показує свою панель керування та контур, коли ви наводите на нього курсор. Виберіть **Preview** у меню перегляду й наведіть курсор знову.
- **Opacity, Font size або Border radius зі значенням 0 не діють.** Значення 0 вважається невстановленим для цих трьох полів. Щоб згасити елемент майже повністю, використайте **Opacity** зі значенням 0,01.

## Що далі?

- [Анімуйте елементи під час прокручування в поле зору](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%BD%D1%96%D0%BC%D0%B0%D1%86%D1%96%D1%8F): додавайте рух поза наведенням.
- [Стилізуйте свої картки](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%81%D1%82%D0%B8%D0%BB%D1%96-%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BA): поєднуйте наведення з кольорами та тінями карток.