# زر الرد يحصل على تأثير تفتيح وخط عريض عند التمرير/التحويم

**URL:** https://meta.discourse.org/t/reply-button-getting-brightening-and-bold-effect-on-scroll-hover/397387
**Category:** Development
**Created:** [1 مارس 2026، 10:57م UTC](https://meta.discourse.org/t/reply-button-getting-brightening-and-bold-effect-on-scroll-hover/397387 "2026-03-01T22:57:40Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![hipp0](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hipp0/32/537433_2.png) [@hipp0](https://meta.discourse.org/u/hipp0)
#### Post date: [1 مارس 2026، 10:57م UTC](https://meta.discourse.org/t/reply-button-getting-brightening-and-bold-effect-on-scroll-hover/397387/1 "2026-03-01T22:57:40Z")

</div>

لقد كان زر الرد أصعب شيء تم إصلاحه باستخدام CSS.

إنه يجعل زر الرد أكثر إشراقًا عند تمرير مؤشر الماوس فوق المنشور أو التركيز عليه. كما أنه يجعل كلمة “Reply” (رد) أكثر سمكًا عند التمرير، وهو ما لا يعجبني.

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/d/3/2d3cbb4851e0ab63312fc49ebae500ac520f1372.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/0/9/a09e2f8277d9179fd9d5821fbce6f723a9486f7c.png)

كما أنه يغير لون الخط عند التمرير المباشر، ولكنه غيّر الأيقونة فقط وليس كلمة “Reply”، لذا أحتاج إلى CSS لتوحيد الإعداد الافتراضي.

![image](https://global.discourse-cdn.com/meta/original/4X/c/0/1/c0175056a36db8cd1bc99aa63c7a96ad30b1e4a8.png)

> [@How to css-control the 'reply' and 'show replies' buttons?](https://meta.discourse.org/t/how-to-css-control-the-reply-and-show-replies-buttons/24946):
>
> I’m doing some css-customization on a discourse installation. Right now I’m working on a more simple thread-design. (I’ll share when finished smile) But I’m stuck on how to control the look of theese two buttons: I wan’t to make the background transparent (when not mousing-over) and I’ve tried: .nav.post-controls button.create {background: transparent;} .nav.post-controls .show-replies {background: transparent;} Which seems to work in Chrome developer tools but not when impleme…

هناك العديد من التأثيرات التي تحدث على زر الرد، وهناك أيضًا نوع من التغميق/أو إضافة خط أثقل.

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/0/2/f02155587db4251e88f1a6838d93a815b9dfd7db.png)

![image](https://global.discourse-cdn.com/meta/original/4X/c/3/b/c3ba1ece59841ad001671dc7038c113ab244b26e.png)

هذا هو الكود الذي أملكه، ولا يزال هناك تأثير لتكبير الخط يحدث، وقد تمكنت من التخلص من تأثير التفتيح:

```plaintext
.post-info.edits .btn-flat svg,
.post-info.edits .btn-flat .d-button-label,
.topic-post .post-controls .create svg,
.topic-post .post-controls .create .d-button-label {
    fill: #7b7b7b !important;
    color: #7b7b7b !important;
 
}

/* 2. حالة التمرير: التغيير إلى e0e0e0 */
.post-info.edits .btn-flat:hover svg,
.post-info.edits .btn-flat:hover .d-button-label,
.topic-post .post-controls .create:hover svg,
.topic-post .post-controls .create:hover .d-button-label {
    fill: #e0e0e0 !important;
    color: #e0e0e0 !important;
}

/* 3. إيقاف التفتيح/التوهج وتخفيف الانتقالات */
.post-info.edits .btn-flat,
.topic-post .post-controls .create {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

/* 4. منع تمييز التمرير من إزالة ألوان التمييز */
.topic-post.highlighted .post-controls .create,
.topic-post.highlighted .post-info.edits .btn-flat {
    filter: none !important;
    opacity: 1 !important;
}

```

سيكون من الرائع جدًا إذا تمكنت من تعديل الأيقونات/الخط/النص من خلال نوع من التصميم المدمج. حيث لدي الكثير من CSS الذي يجعل المظهر الافتراضي جيدًا لاحتياجاتي.

لقد كان مظهره أفضل من هذا ولكن كان علي إزالة CSS الذي كان لدي لأنه كان يسبب الكثير من المشاكل بسبب الأزرار المزدوجة وجميع الأنماط المختلفة التي يتم تطبيقها.

---

_[View the full topic](https://meta.discourse.org/t/reply-button-getting-brightening-and-bold-effect-on-scroll-hover/397387)._