--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/efekty-hover' title: 'Spraw, aby elementy reagowały na najechanie | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:38:07+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Spraw, aby element zmieniał się, gdy odwiedzający go wskaże: pudło unoszące się, przycisk ciemniejący, obraz jaśniejący. Wygląd spoczynkowy ustawiasz w panelu Style, a wygląd najechania w jego bliźniaku, panelu Hover style. Przykład buduje szare pudło tekstowe unoszące się po najechaniu. Film nadaje pudłu tekstowemu tło, dopełnienie i cień pogłębiający się po najechaniu. 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-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Spraw, aby elementy reagowały na najechanie' description: |- Spraw, aby element zmieniał się, gdy odwiedzający go wskaże: pudło unoszące się, przycisk ciemniejący, obraz jaśniejący. Wygląd spoczynkowy ustawiasz w panelu Style, a wygląd najechania w jego bliźniaku, panelu Hover style. Przykład buduje szare pudło tekstowe unoszące się po najechaniu. Film nadaje pudłu tekstowemu tło, dopełnienie i cień pogłębiający się po najechaniu. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:38:07+0000' dateModified: '2026-10-24T17:19:22+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/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/efekty-hover' articleSection: 'Przewodniki projektowe' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/efekty-hover' description: |- Spraw, aby element zmieniał się, gdy odwiedzający go wskaże: pudło unoszące się, przycisk ciemniejący, obraz jaśniejący. Wygląd spoczynkowy ustawiasz w panelu Style, a wygląd najechania w jego bliźniaku, panelu Hover style. Przykład buduje szare pudło tekstowe unoszące się po najechaniu. Film nadaje pudłu tekstowemu tło, dopełnienie i cień pogłębiający się po najechaniu. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 'Strona Główna' item: 'https://dxpr.com/pl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pl --- [Centrum pomocy](/pl/hc)/[Dokumentacja](/pl/hc/dokumentacja) /[Poznaj DXPR Builder](/pl/hc/documentation/learn-dxpr-builder) /[Buduj strony](/pl/hc/documentation/learn-dxpr-builder/build) /[Stylizuj elementy](/pl/hc/documentation/learn-dxpr-builder/element-settings) /[Przewodniki projektowe](/pl/hc/documentation/learn-dxpr-builder/design/overview) # Spraw, aby elementy reagowały na najechanie. Poznaj DXPR BuilderBuduj stronyStylizuj elementyPrzewodniki projektowe ## W tym przewodniku Powiązane przewodniki - [Animuj elementy przy przewijaniu, najechaniu i kliknięciu](/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/animacje) - [Styluj swoje karty](/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/style-kart) Spraw, aby element zmieniał się, gdy odwiedzający go wskaże: pudło unoszące się, przycisk ciemniejący, obraz jaśniejący. Wygląd spoczynkowy ustawiasz w panelu **Style**, a wygląd najechania w jego bliźniaku, panelu **Hover style**. Przykład buduje szare pudło tekstowe unoszące się po najechaniu. Film nadaje pudłu tekstowemu tło, dopełnienie i cień pogłębiający się po najechaniu. ## Budowanie pudła tekstowego 1. Kliknij **+** w obszarze treści i wybierz **Section** z karty **Layout**. 2. Kliknij **+** na sekcji i wybierz **Row**. 3. Kliknij ikonę siatki na wierszu, wybierz kafelek z trzema równymi kolumnami i kliknij **Save**. 4. Kliknij **+** w pierwszej kolumnie i wybierz **Text** z karty **Content**. 5. Wpisz „Open day”, ustaw na **Heading 3** i dodaj jeden wiersz pod nim. ## Ustawienie stylu spoczynkowego 1. W tym samym oknie ustawień otwórz panel **Style**. 2. Wybierz jasnoszare **Background**. 3. W modelu pudełkowym ustaw górny, lewy i dolny bok **Padding** na 24. 4. Ustaw **Border radius** na 8. 5. Ustaw **Drop shadow** na 1. ## Ustawienie stylu najechania 1. Otwórz panel **Hover style**. 2. Ustaw **Drop shadow** na 4. 3. Kliknij **Save**. 4. Kliknij **Save** na pasku narzędzi kreatora DXPR. 5. Otwórz menu widoku, ikonę oka na pasku narzędzi, i wybierz **Preview**. 6. Przenieś wskaźnik na pudło tekstowe. ## Co widzisz W spoczynku pudło tekstowe jest szare, z zaokrąglonymi rogami i lekkim cieniem. Gdy wskaźnik je osiągnie, cień się pogłębia i pudło zdaje się unosić; gdy wskaźnik odejdzie, osiada z powrotem. Zmiana cienia jest animowana. Pozostałe zmiany najechania, na przykład nowy kolor, przełączają się od razu. ## Ustawienia Panel **Hover style** zawiera te same pola co panel **Style**. Pole pozostawione puste zachowuje wartość spoczynkową. | Pole | Użycie po najechaniu | |---|---| | **Margin**, **Border**, **Padding** (model pudełkowy) | Przesunięcie, obramowanie albo powiększenie elementu | | **Font color** | Wyróżnienie tekstu | | **Border color** | Podkreślenie obramowania | | **Background** | Zmiana wypełnienia | | **Background image**, **Background style**, **Background position** | Podmiana albo przesunięcie obrazu | | **Border style** | Pokazanie obramowania | | **Font size** | Powiększenie tekstu | | **Border radius** | Zaokrąglenie rogów | | **Opacity** | Odsłonięcie albo przyciemnienie elementu | | **Drop shadow** | Dodanie głębi, od 1 do 5 | ## Typowe wzorce - **Unoszenie karty**: **Drop shadow** 1 w **Style**, 4 w **Hover style**. - **Odsłonięcie obrazu**: **Opacity** 0.7 w **Style**, 1 w **Hover style**. - **Zmiana koloru przycisku**: ciemniejsze **Background** w **Hover style**. - **Wyróżnienie obramowaniem**: **Border style** **Solid** z jasnym **Border color** w **Style**, akcentujący **Border color** w **Hover style**. ## Jeśli nie widzisz efektu - **Pudło tekstowe nie zmienia się po wskazaniu.** Wartość najechania równa się wartości spoczynkowej albo przez pomyłkę ustawiono ją w panelu **Style**. Otwórz **More** > **Settings** i podnieś **Drop shadow** w panelu **Hover style**. - **Efekt trudno ocenić podczas edycji.** W trybie edycji element pokazuje też pasek narzędzi i obrys po wskazaniu. Wybierz **Preview** w menu widoku i wskaż ponownie. - **Opacity, Font size albo Border radius ustawione na 0 nie działa.** Wartość 0 liczy się jako nieustawiona dla tych trzech pól. Aby element prawie całkowicie wygasić, użyj **Opacity** 0.01. ## Co dalej? - [Animowanie elementów wjeżdżających w widok](/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/animacje): dodaj ruch wykraczający poza najechanie. - [Stylowanie kart](/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/style-kart): połącz najechanie z kolorami i cieniami kart.