---
url: 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/design/hover-effects'
title: 'جعل العناصر تتفاعل عند التحويم | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T01:23:51+00:00'
updated: '2026-10-24T06:22:57+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  اجعلوا عنصرًا يتغير عندما يشير إليه زائر: صندوق يرتفع أو زر يغمق أو صورة
  تُشرق. تضبطون مظهر الراحة في لوحة النمط ومظهر التحويم في توأمها، لوحة
  نمط التحويم. يبني المثال مربع نص رماديًا يرتفع عند التحويم.
  يمنح الفيديو مربع نص خلفية وحشوة وظلًا يعمق عند التحويم.
tags:
  - Ontwerpgidsen
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T06:22:57+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'جعل العناصر تتفاعل عند التحويم'
      description: |-
        اجعلوا عنصرًا يتغير عندما يشير إليه زائر: صندوق يرتفع أو زر يغمق أو صورة
        تُشرق. تضبطون مظهر الراحة في لوحة النمط ومظهر التحويم في توأمها، لوحة
        نمط التحويم. يبني المثال مربع نص رماديًا يرتفع عند التحويم.
        يمنح الفيديو مربع نص خلفية وحشوة وظلًا يعمق عند التحويم.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T01:23:51+0000'
      dateModified: '2026-10-24T06:22:57+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/ar/hc/documentation/learn-dxpr-builder/design/hover-effects'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/documentation/learn-dxpr-builder/design/hover-effects'
      description: |-
        اجعلوا عنصرًا يتغير عندما يشير إليه زائر: صندوق يرتفع أو زر يغمق أو صورة
        تُشرق. تضبطون مظهر الراحة في لوحة النمط ومظهر التحويم في توأمها، لوحة
        نمط التحويم. يبني المثال مربع نص رماديًا يرتفع عند التحويم.
        يمنح الفيديو مربع نص خلفية وحشوة وظلًا يعمق عند التحويم.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: الرئيسية
            item: 'https://dxpr.com/ar'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ar
---
[Help Center](/ar/hc)/[Documentation](/ar/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # جعل العناصر تتفاعل عند التحويم.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [تحريك العناصر عند التمرير أو التحويم أو النقر](/ar/hc/documentation/learn-dxpr-builder/design/animation-tab)
- [تنسيق بطاقاتكم](/ar/hc/documentation/learn-dxpr-builder/design/card-styles)

اجعلوا عنصرًا يتغير عندما يشير إليه زائر: صندوق يرتفع أو زر يغمق أو صورة تُشرق. تضبطون مظهر الراحة في لوحة **النمط** ومظهر التحويم في توأمها، لوحة **نمط التحويم**. يبني المثال مربع نص رماديًا يرتفع عند التحويم.

يمنح الفيديو مربع نص خلفية وحشوة وظلًا يعمق عند التحويم.

  ## بناء مربع النص

1. انقروا **+** في منطقة المحتوى واختاروا **مقطعًا** من تبويب **التخطيط**.
2. انقروا **+** على المقطع واختاروا **صفًا**.
3. انقروا أيقونة الشبكة على الصف واختاروا البلاطة ذات الأعمدة الثلاثة المتساوية وانقروا **حفظ**.
4. انقروا **+** في العمود الأول واختاروا **نصًا** من تبويب **المحتوى**.
5. اكتبوا "Open day" واضبطوه على **العنوان 3** وأضيفوا سطرًا تحته.

## ضبط نمط الراحة

1. في مربع حوار الإعدادات نفسه، افتحوا لوحة **النمط**.
2. اختاروا **خلفية** رمادية فاتحة.
3. في نموذج الصندوق، اضبطوا الجوانب العلوية واليسرى والسفلية من **الحشوة** على 24.
4. اضبطوا **نصف قطر الحد** على 8.
5. اضبطوا **ظل الإسقاط** على 1.

## ضبط نمط التحويم

1. افتحوا لوحة **نمط التحويم**.
2. اضبطوا **ظل الإسقاط** على 4.
3. انقروا **حفظ**.
4. انقروا **حفظ** على شريط أدوات DXPR Builder.
5. افتحوا قائمة العرض، أيقونة العين على شريط الأدوات، واختاروا **معاينة**.
6. حرّكوا المؤشر إلى مربع النص.

## ما الذي ترونه

في الراحة يكون مربع النص رماديًا بزوايا مستديرة وظل خفيف. وعندما يبلغه المؤشر، يعمق الظل ويبدو الصندوق كأنه يرتفع؛ وعندما يغادر المؤشر، يستقر عائدًا. ويكون تغير الظل متحركًا. أما تغيرات التحويم الأخرى، مثل لون جديد، فتتبدل فورًا.

## الإعدادات

تحمل لوحة **نمط التحويم** الحقول نفسها التي تحملها لوحة **النمط**. والحقل المتروك فارغًا يحتفظ بقيمة الراحة.

| الحقل | استخدامه عند التحويم |
|---|---|
| **الهامش** و**الحد** و**الحشوة** (نموذج الصندوق) | إزاحة العنصر أو تأطيره أو تكبيره |
| **لون الخط** | إبراز النص |
| **لون الحد** | تأكيد الحد |
| **الخلفية** | تغيير التعبئة |
| **صورة الخلفية** و**نمط الخلفية** و**موضع الخلفية** | تبديل الصورة أو تحريكها |
| **نمط الحد** | إظهار حد |
| **حجم الخط** | تكبير النص |
| **نصف قطر الحد** | تدوير الزوايا |
| **الشفافية** | كشف العنصر أو تعتيمه |
| **ظل الإسقاط** | إضافة عمق، من 1 إلى 5 |

## أنماط شائعة

- **رفع البطاقة**: **ظل الإسقاط** 1 في **النمط** و4 في **نمط التحويم**.
- **كشف الصورة**: **الشفافية** 0.7 في **النمط** و1 في **نمط التحويم**.
- **تغيير لون زر**: **خلفية** أغمق في **نمط التحويم**.
- **إبراز الحد**: **نمط الحد** **مصمت** مع لون **حد** فاتح في **النمط** ولون **حد** مميز في **نمط التحويم**.

## إذا لم تروا الأثر

- **مربع النص لا يتغير عندما تشيرون إليه.** فقيمة التحويم تساوي قيمة الراحة، أو ضبطتموها في لوحة **النمط** خطأ. افتحوا **المزيد** > **الإعدادات** وارفعوا **ظل الإسقاط** في لوحة **نمط التحويم**.
- **يصعب تقييم الأثر أثناء التحرير.** في وضع التحرير يعرض العنصر أيضًا شريط تحكمه ومحيطه عندما تشيرون إليه. اختاروا **معاينة** في قائمة العرض وأشيروا إليه مجددًا.
- **ضبط الشفافية أو حجم الخط أو نصف قطر الحد على 0 دون أثر.** تُحتسَب القيمة 0 كغير مضبوطة لهذه الحقول الثلاثة. ولتلاشي عنصر تقريبًا تمامًا، استخدموا **شفافية** 0.01.

## ما الخطوة التالية؟

- [تحريك العناصر بينما تُمرَّر إلى العرض](/ar/hc/documentation/learn-dxpr-builder/design/animation-tab): إضافة حركة تتجاوز التحويم.
- [تنسيق بطاقاتكم](/ar/hc/documentation/learn-dxpr-builder/design/card-styles): الجمع بين التحويم وألوان البطاقات وظلالها.