'CSS Darken on Hover without Changing Text Color [duplicate]

I'm looking to darken an element on hover without also darkening the text color. I would like the text to remain pure white on hover.

Example:

<a href="#" class="badge" style="background-color: #0072CE;"><span>Some Text</span></a>

CSS:

.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: white;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  text-decoration: none;
}
.badge:hover {filter: brightness(0.8);}
.badge > span {color: white;}

I tried applying positioning and z-index but that didn't work either. Also, I need the style tag because the background colors are generated dynamically.

Any help on the above or a different solution altogether would be appreciated!

EDIT: My appologies, I should have been clear that I also don't have access to set the hover color in the styles.

css


Solution 1:[1]

Instead of using filter: Brightness(), I prefer to use filter: Saturate(). It gives object darken background but doesn't affect your text.

.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: white;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  text-decoration: none;
}
/* .badge:hover {filter: brightness(0.8);} */
.badge:hover {filter: saturate(0.5);}
.badge > span {color: white;}
<a href="#" class="badge" style="background-color: #0072CE;"><span>Some Text</span></a>

Solution 2:[2]

This is the best solution I can think of right now when you're unable to change the inline styling.

Essentially styling the span instead, changing it's background opacity based on hover.

.badge {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: white;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  text-decoration: none;
}

.badge>span {
  display: block;
  padding: .35em .65em;
  border-radius: inherit;
}

.badge>span:hover {
  background-color: #0004;
}
<a href="#" class="badge" style="background-color: #0072CE;"><span>Some Text</span></a>

Solution 3:[3]

you can use background-color attribute to change the background color

.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: white;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  text-decoration: none;
  background-color: rgba(111,111,111,1);
}
.badge:hover {background-color: rgba(111,111,111,.5);}

you can make background color transparent with value of alpha in rgba(r, g, b, alpha)

or

you can just change background color

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Binh Vo
Solution 2
Solution 3 Abhijeet Arya

Related Questions