CODEWITHSUNDEEP
csscss-filters
Ole
Ole

Reputation: 47068

Darken an inherited text color at runtime?

Suppose I have an element where the text color is inherited:

element { color: inherited}

I'd also like to darken this on hover:

element:hover { color:darker(10%) }

Is there a pure css (No javascript) trick/hack for this that has fairly good browser support?

Upvotes: 1

Views: 931

Answers (1)

ashish singh
ashish singh

Reputation: 6914

you can use filter to get near to what you want to achieve.

see the attached demo

.p{
  color: blue;
  font-size: 2em;
  text-transform: uppercase;
  font-weight:bold;
  font-family:arial, sans-serif;
}

.c:hover{
  filter: brightness(0.2)
}
<div class="p">
  <div class="c">hello</div>

Upvotes: 2

Related Questions