# Changing background color on hover

**URL:** <https://forum.readymag.com/t/changing-background-color-on-hover/351>\
**Category:** Custom code\
**Created:** [June 15, 2022, 2:05pm UTC](https://forum.readymag.com/t/changing-background-color-on-hover/351 "2022-06-15T14:05:35Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![antony\_northcutt](https://avatars.discourse-cdn.com/v4/letter/a/e36b37/32.png) [@antony\_northcutt](https://forum.readymag.com/u/antony_northcutt)\
**Post date:** [June 15, 2022, 2:05pm UTC](https://forum.readymag.com/t/changing-background-color-on-hover/351/1 "2022-06-15T14:05:35Z")

</div>

I have an element with the data-id and all I want to do is change it’s color on hover. I have written this code but it’s not working any ideas folks?

```auto
[data-id="62a9902ddbc6230028d27b3d"]:hover{
  background-color: rgb(255,255,255);
}

```

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [June 16, 2022, 8:00am UTC](https://forum.readymag.com/t/changing-background-color-on-hover/351/2 "2022-06-16T08:00:51Z")

</div>

hey.  
just add `!important` after the Css value to overwrite the existing style.

The code then should looks like this:

```auto
[data-id="62a9902ddbc6230028d27b3d"]:hover{
  background-color: rgb(255,255,255)!important;
}

```

```auto

```

---

<div class="post-metadata">

**Author:** ![antony\_northcutt](https://avatars.discourse-cdn.com/v4/letter/a/e36b37/32.png) [@antony\_northcutt](https://forum.readymag.com/u/antony_northcutt)\
**Post date:** [June 16, 2022, 9:20am UTC](https://forum.readymag.com/t/changing-background-color-on-hover/351/3 "2022-06-16T09:20:30Z")

</div>

thank you thank you thank you!!

---

<div class="post-metadata">

**Author:** ![kutzkutz](https://avatars.discourse-cdn.com/v4/letter/k/aca169/32.png) [@kutzkutz](https://forum.readymag.com/u/kutzkutz)\
**Post date:** [February 15, 2023, 12:56pm UTC](https://forum.readymag.com/t/changing-background-color-on-hover/351/4 "2023-02-15T12:56:39Z")

</div>

Hey, does this also work for .svg’s that are links. This is my code.

data-id=“63ca92185421d1001b598bd2” :hover{  
fill: #FCB6D9; !important;  
}

---

<div class="post-metadata">

**Author:** ![kutzkutz](https://avatars.discourse-cdn.com/v4/letter/k/aca169/32.png) [@kutzkutz](https://forum.readymag.com/u/kutzkutz)\
**Post date:** [February 15, 2023, 12:57pm UTC](https://forum.readymag.com/t/changing-background-color-on-hover/351/5 "2023-02-15T12:57:17Z")

</div>

WTF! i can’t paste the whole code because the stuff inside brackets isn’t showing. This is sooo annnoying. Never spent so much time trying to figure out how to do something that should be so simple. But I do have brackets before “data-id” and after the data id ".

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [February 15, 2023, 1:46pm UTC](https://forum.readymag.com/t/changing-background-color-on-hover/351/6 "2023-02-15T13:46:02Z")

</div>

should work the same, yes. but as te svg is embed in this data-id container you have to get the svg div, which is probably a child of it.

The color of a svg you also can fill or change via the “filter” css setting.  
this adds a filter, that changes the color of it. you can get the exact filtersettings via this generator: **[https://angel-rs.github.io/css-color-filter-generator/](https://angel-rs.github.io/css-color-filter-generator/)**

---

<div class="post-metadata">

**Author:** ![kutzkutz](https://avatars.discourse-cdn.com/v4/letter/k/aca169/32.png) [@kutzkutz](https://forum.readymag.com/u/kutzkutz)\
**Post date:** [February 15, 2023, 1:52pm UTC](https://forum.readymag.com/t/changing-background-color-on-hover/351/7 "2023-02-15T13:52:42Z")

</div>

Ah sick! Thanks for the pro tip. Out of the office now but will take a stab at this tomorrow! Thanks NeueMeta!

---

<div class="post-metadata">

**Author:** ![kutzkutz](https://avatars.discourse-cdn.com/v4/letter/k/aca169/32.png) [@kutzkutz](https://forum.readymag.com/u/kutzkutz)\
**Post date:** [February 16, 2023, 2:33pm UTC](https://forum.readymag.com/t/changing-background-color-on-hover/351/8 "2023-02-16T14:33:06Z")

</div>

Hey man. The link below is a screenshot of my code. Maybe if you have a second you could tell me which exact div or whatever I should target. Sorry, don’t know much of the lingo which makes it hard to search what to look for.

[[Album] svg - hover ![](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/1X/887c1bb75eafeebba69aef18c4f7803e45455f32.jpeg "svg - hover") ](https://imgur.com/a/ETrjy21)

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [February 16, 2023, 2:55pm UTC](https://forum.readymag.com/t/changing-background-color-on-hover/351/9 "2023-02-16T14:55:25Z")

</div>

try to adress it only with css like:

svg {  
fill: #FFF;  
filter: brightness(0) saturate(100%) invert(36%) sepia(58%) saturate(2070%) hue-rotate(334deg) brightness(124%) contrast(104%)  
color: red;  
}