Text opacity hover colors
Modify text color on hover or focus with opacity in the range from 0.1 to 0.9.
PrimarySecondarySuccessInfoWarningDangerLightDarkBlackIndigoOrangePinkPurpleTealWhite
<!-- Source -->
<div class="text-hover-primary-10">Primary</div>
<div class="text-hover-primary-20">Primary</div>
<div class="text-hover-primary-30">Primary</div>
<div class="text-hover-primary-40">Primary</div>
<div class="text-hover-primary-50">Primary</div>
<div class="text-hover-primary-60">Primary</div>
<div class="text-hover-primary-70">Primary</div>
<div class="text-hover-primary-80">Primary</div>
<div class="text-hover-primary-90">Primary</div>
<div class="text-hover-secondary-10">Secondary</div>
<div class="text-hover-secondary-20">Secondary</div>
<div class="text-hover-secondary-30">Secondary</div>
<div class="text-hover-secondary-40">Secondary</div>
<div class="text-hover-secondary-50">Secondary</div>
<div class="text-hover-secondary-60">Secondary</div>
<div class="text-hover-secondary-70">Secondary</div>
<div class="text-hover-secondary-80">Secondary</div>
<div class="text-hover-secondary-90">Secondary</div>
<div class="text-hover-success-10">Success</div>
<div class="text-hover-success-20">Success</div>
<div class="text-hover-success-30">Success</div>
<div class="text-hover-success-40">Success</div>
<div class="text-hover-success-50">Success</div>
<div class="text-hover-success-60">Success</div>
<div class="text-hover-success-70">Success</div>
<div class="text-hover-success-80">Success</div>
<div class="text-hover-success-90">Success</div>
<div class="text-hover-info-10">Info</div>
<div class="text-hover-info-20">Info</div>
<div class="text-hover-info-30">Info</div>
<div class="text-hover-info-40">Info</div>
<div class="text-hover-info-50">Info</div>
<div class="text-hover-info-60">Info</div>
<div class="text-hover-info-70">Info</div>
<div class="text-hover-info-80">Info</div>
<div class="text-hover-info-90">Info</div>
<div class="text-hover-warning-10">Warning</div>
<div class="text-hover-warning-20">Warning</div>
<div class="text-hover-warning-30">Warning</div>
<div class="text-hover-warning-40">Warning</div>
<div class="text-hover-warning-50">Warning</div>
<div class="text-hover-warning-60">Warning</div>
<div class="text-hover-warning-70">Warning</div>
<div class="text-hover-warning-80">Warning</div>
<div class="text-hover-warning-90">Warning</div>
<div class="text-hover-danger-10">Danger</div>
<div class="text-hover-danger-20">Danger</div>
<div class="text-hover-danger-30">Danger</div>
<div class="text-hover-danger-40">Danger</div>
<div class="text-hover-danger-50">Danger</div>
<div class="text-hover-danger-60">Danger</div>
<div class="text-hover-danger-70">Danger</div>
<div class="text-hover-danger-80">Danger</div>
<div class="text-hover-danger-90">Danger</div>
<div class="text-hover-light-10">Light</div>
<div class="text-hover-light-20">Light</div>
<div class="text-hover-light-30">Light</div>
<div class="text-hover-light-40">Light</div>
<div class="text-hover-light-50">Light</div>
<div class="text-hover-light-60">Light</div>
<div class="text-hover-light-70">Light</div>
<div class="text-hover-light-80">Light</div>
<div class="text-hover-light-90">Light</div>
<div class="text-hover-dark-10">Dark</div>
<div class="text-hover-dark-20">Dark</div>
<div class="text-hover-dark-30">Dark</div>
<div class="text-hover-dark-40">Dark</div>
<div class="text-hover-dark-50">Dark</div>
<div class="text-hover-dark-60">Dark</div>
<div class="text-hover-dark-70">Dark</div>
<div class="text-hover-dark-80">Dark</div>
<div class="text-hover-dark-90">Dark</div>
<div class="text-hover-black-10">Black</div>
<div class="text-hover-black-20">Black</div>
<div class="text-hover-black-30">Black</div>
<div class="text-hover-black-40">Black</div>
<div class="text-hover-black-50">Black</div>
<div class="text-hover-black-60">Black</div>
<div class="text-hover-black-70">Black</div>
<div class="text-hover-black-80">Black</div>
<div class="text-hover-black-90">Black</div>
<div class="text-hover-indigo-10">Indigo</div>
<div class="text-hover-indigo-20">Indigo</div>
<div class="text-hover-indigo-30">Indigo</div>
<div class="text-hover-indigo-40">Indigo</div>
<div class="text-hover-indigo-50">Indigo</div>
<div class="text-hover-indigo-60">Indigo</div>
<div class="text-hover-indigo-70">Indigo</div>
<div class="text-hover-indigo-80">Indigo</div>
<div class="text-hover-indigo-90">Indigo</div>
<div class="text-hover-orange-10">Orange</div>
<div class="text-hover-orange-20">Orange</div>
<div class="text-hover-orange-30">Orange</div>
<div class="text-hover-orange-40">Orange</div>
<div class="text-hover-orange-50">Orange</div>
<div class="text-hover-orange-60">Orange</div>
<div class="text-hover-orange-70">Orange</div>
<div class="text-hover-orange-80">Orange</div>
<div class="text-hover-orange-90">Orange</div>
<div class="text-hover-pink-10">Pink</div>
<div class="text-hover-pink-20">Pink</div>
<div class="text-hover-pink-30">Pink</div>
<div class="text-hover-pink-40">Pink</div>
<div class="text-hover-pink-50">Pink</div>
<div class="text-hover-pink-60">Pink</div>
<div class="text-hover-pink-70">Pink</div>
<div class="text-hover-pink-80">Pink</div>
<div class="text-hover-pink-90">Pink</div>
<div class="text-hover-purple-10">Purple</div>
<div class="text-hover-purple-20">Purple</div>
<div class="text-hover-purple-30">Purple</div>
<div class="text-hover-purple-40">Purple</div>
<div class="text-hover-purple-50">Purple</div>
<div class="text-hover-purple-60">Purple</div>
<div class="text-hover-purple-70">Purple</div>
<div class="text-hover-purple-80">Purple</div>
<div class="text-hover-purple-90">Purple</div>
<div class="text-hover-teal-10">Teal</div>
<div class="text-hover-teal-20">Teal</div>
<div class="text-hover-teal-30">Teal</div>
<div class="text-hover-teal-40">Teal</div>
<div class="text-hover-teal-50">Teal</div>
<div class="text-hover-teal-60">Teal</div>
<div class="text-hover-teal-70">Teal</div>
<div class="text-hover-teal-80">Teal</div>
<div class="text-hover-teal-90">Teal</div>
<div class="text-hover-white-10">White</div>
<div class="text-hover-white-20">White</div>
<div class="text-hover-white-30">White</div>
<div class="text-hover-white-40">White</div>
<div class="text-hover-white-50">White</div>
<div class="text-hover-white-60">White</div>
<div class="text-hover-white-70">White</div>
<div class="text-hover-white-80">White</div>
<div class="text-hover-white-90">White</div>