# Custom CSS hover in Categories

**URL:** https://meta.discourse.org/t/custom-css-hover-in-categories/141898
**Category:** Support
**Created:** [February 18, 2020, 2:04pm UTC](https://meta.discourse.org/t/custom-css-hover-in-categories/141898 "2020-02-18T14:04:29Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![AndreSpecker](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrespecker/32/139050_2.png) [@AndreSpecker](https://meta.discourse.org/u/AndreSpecker)
#### Post date: [February 18, 2020, 2:04pm UTC](https://meta.discourse.org/t/custom-css-hover-in-categories/141898/1 "2020-02-18T14:04:29Z")

</div>

How i can add a custom a:hover ??? I change the background, but I have no idea how the structure is to add a: hover

i try this, but doesn’t work

> [data-category-id=“7”] {  
> .category-box { background: #0088CC10; }  
> a:hover { color: #D52133 !important; }  
> }

For background i use this

```plaintext
.category-box[data-category-id="1"] { background: #0088CC10; }
.category-box[data-category-id="7"] { background: #231F2010; }
.category-box[data-category-id="8"] { background: #12a89d10; }
.category-box[data-category-id="5"] { background: #bf1e2e10; }
.category-box[data-category-id="9"] { background: #25AAE210; }
.category-box[data-category-id="6"] { background: #F7941D10; }
.category-box[data-category-id="10"] { background: #B3B5B410; }
.category-box[data-category-id="2"] { background: #80828110; }
.category-box[data-category-id="3"] { background: #E4573510; }
.category-box[data-category-id="4"] { background: #A461EF10; }

```

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

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [February 18, 2020, 2:14pm UTC](https://meta.discourse.org/t/custom-css-hover-in-categories/141898/2 "2020-02-18T14:14:38Z")

</div>

I don’t know what your HTML looks like, can you provide a link to your category page?

---

<div class="post-metadata">

### Author: ![AndreSpecker](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrespecker/32/139050_2.png) [@AndreSpecker](https://meta.discourse.org/u/AndreSpecker)
#### Post date: [February 18, 2020, 2:15pm UTC](https://meta.discourse.org/t/custom-css-hover-in-categories/141898/3 "2020-02-18T14:15:28Z")

</div>

[https://alertamaximo.com/categories](https://alertamaximo.com/categories)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [February 18, 2020, 2:25pm UTC](https://meta.discourse.org/t/custom-css-hover-in-categories/141898/4 "2020-02-18T14:25:17Z")

</div>

Example for category 1:

```scss
.category-box[data-category-id="1"] {
    background: #0088CC10;
    .badge-wrapper.bullet:hover span.badge-category {
      color: red;
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![AndreSpecker](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrespecker/32/139050_2.png) [@AndreSpecker](https://meta.discourse.org/u/AndreSpecker)
#### Post date: [February 18, 2020, 2:27pm UTC](https://meta.discourse.org/t/custom-css-hover-in-categories/141898/5 "2020-02-18T14:27:08Z")

</div>

worked perfectly, thank you very much

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [March 19, 2020, 2:31pm UTC](https://meta.discourse.org/t/custom-css-hover-in-categories/141898/6 "2020-03-19T14:31:48Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.