# فئة التحويم (hover) في CSS لأيقونة الترس في شريط الأدوات؟

**URL:** https://meta.discourse.org/t/css-hover-class-of-the-gear-icon-on-the-toolbar/101982
**Category:** UX
**Created:** [14 نوفمبر 2018، 2:16ص UTC](https://meta.discourse.org/t/css-hover-class-of-the-gear-icon-on-the-toolbar/101982 "2018-11-14T02:16:59Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [14 نوفمبر 2018، 2:16ص UTC](https://meta.discourse.org/t/css-hover-class-of-the-gear-icon-on-the-toolbar/101982/1 "2018-11-14T02:16:59Z")

</div>

Hi, I come for help on a little css class I can’t seem to find. I’m usually doing ok in these kind of thing but I’m stuck on this one.

I’m looking for the css class on the hover of this button :

> ![image](https://global.discourse-cdn.com/meta/original/3X/7/0/70a0bf4686f56c8861e43a6a4225998e8da7b9d1.png)

On my theme, this button always acts differently than the others.

> ![image](https://global.discourse-cdn.com/meta/original/3X/9/4/94065ebd7b633054c26db2f0f33a773b19456284.png)  
> (my hover color should be `#1395ba` on this theme)

I think the class comes from this file : [https://github.com/discourse/discourse/blob/master/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss](https://github.com/discourse/discourse/blob/master/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss)

But everything I try doesn’t take. The hover on this button is always this light grey color

We can see on this forum with the theme Graceful that this button doens’t react like the other.

Anyway, anyone has a clue to help me find the class on this little button?

Nothing urgent at all, it’s a small detail

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [14 نوفمبر 2018، 2:30ص UTC](https://meta.discourse.org/t/css-hover-class-of-the-gear-icon-on-the-toolbar/101982/2 "2018-11-14T02:30:43Z")

</div>

That button is structured a bit differently because it’s a dropdown… but the CSS is definitely too specific and it should have its styling applied like the other buttons. I’ll add improving that to my to-do list so it’s easier in the future, but for now you want:

```CSS
.toolbar-popup-menu-options .dropdown-select-box-header:hover {
  background: khaki;
    .d-icon {
      color: salmon;
    }
}

```

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [14 نوفمبر 2018، 7:35م UTC](https://meta.discourse.org/t/css-hover-class-of-the-gear-icon-on-the-toolbar/101982/4 "2018-11-14T19:35:15Z")

</div>

I just tried it, works perfectly, thanks a lot!

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [15 نوفمبر 2018، 7:34م UTC](https://meta.discourse.org/t/css-hover-class-of-the-gear-icon-on-the-toolbar/101982/5 "2018-11-15T19:34:00Z")

</div>

Just an FYI: I’ve removed some extra specificity here, so now something like this should be enough to simultaneously style all the hover states for the editor buttons

```CSS
.discourse-no-touch .d-editor-button-bar button:hover {
  background: khaki; 
  color: salmon;
}

```