CSS Darken on Hover without Changing Text Color-CodePudding

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

CodePudding user response：

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="#"  style="background-color: #0072CE;"><span>Some Text</span></a>

CodePudding user response：

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="#"  style="background-color: #0072CE;"><span>Some Text</span></a>

CodePudding user response：

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)

you can just change background color

CodePudding user response：

instead of using filter on the .badge class, just change the background-color so the font color won't be affected. Also, you might run into some specificity issues when having the style attribute directly written in your html tag. If you are going to add a class to that element, you might as well remove that style attribute and put it inside the css file you have. Hope this helps!

.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 {background-color: 'insert whatever color you want';}