Updating span color on a hover

Question

I am attempting to update span color on hover however I am unable to do so. I am able to update the background color, the size, etc however I am unable to update the font color.

HTML

<div class="subcategories">
     <span class="subcategory">
         <a class="badge-wrapper box" href="/c/anybus/anybus-embedded">
             <span class="badge-category-bg" style="background-color: #808281;"></span>
             <span style="color: #FFFFFF;" data-drop-close="true" class="badge-category clear-badge">My Span Text</span>
         </a>
     </span>

CSS I am trying to use:

.subcategories .subcategory a:hover span{
    color: #6D6D6D;
}

Answer 1

Your inline CSS is overriding the color.

Either remove the inline CSS or add the important tag in your style sheet.

This will work: Although it's best practice not to user inline CSS so I advise you move it out of your HTML.

.subcategories .subcategory a:hover span{
    background-color: #6D6D6D;
    color: red !important;
}