1

I am using bootstrap 5 "text-muted" to grey out or dim the text. On hover, I would like to undo this effect on the text. I am able to make other effects for e.g. text decorations (underline) etc., on hover but not able to revert this effect. Is there a way to do this?

li a {
  color: white;
  &:hover {
    text-decoration: underline;
  }
}
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
Rohit Sharma
  • 3,304
  • 2
  • 19
  • 34
xpath
  • 27
  • 6

2 Answers2

2

BS provides the .text-reset class which does what you want.
Since you are compiling from source you can just extend the class:

li a {
  color: white;
  &:hover {
    @extend .text-reset;
    text-decoration: underline;
  }
}

Or,

If you look at the style rule you can see what declarations are needed:

.text-reset {
    --bs-text-opacity: 1;
    color: inherit!important;
}

And copy them to your rule:

li a {
  color: white;
  &:hover {
    --bs-text-opacity: 1;
    color: inherit!important;
    text-decoration: underline;
  }
}
Arleigh Hix
  • 9,990
  • 1
  • 14
  • 31
  • Hi Arleigh, this worked for me. However, @extend .text-reset throws an error (and prompted me to use !optional and didn't work. just curious to know why? – xpath Oct 18 '21 at 14:43
1

You need to revert the color of the link (like the color of the body) when hovering it

.nav-item a:hover {
  color: $gray-900 !important; // It is #212529
}

If you will see the default color of the body in the variables.scss file it is $gray-900

$body-color:                $gray-900 !default;
Rohit Sharma
  • 3,304
  • 2
  • 19
  • 34
  • Thanks Rohit, I think I might have to includes variables.scss file? because when I tried with $grey-900 didn't recognize. I replaced with color: #212529 didn't work either. Thank you – xpath Oct 18 '21 at 14:44