Changing background color on hover

Custom code
1

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?

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

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

The code then should looks like this:

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

thank you thank you thank you!!

4

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

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

5

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 ".

6

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/

7

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

8

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
9

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;
}