html - 在悬停时更新跨度颜色

Question

我正在尝试更新悬停时的跨度颜色，但我无法这样做。我可以更新背景颜色、大小等，但是我无法更新字体颜色。

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：

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

Answer 1

您的内联 CSS 覆盖了颜色。

删除内联 CSS 或在样式表中添加重要标记。

这将起作用：尽管最好不要使用内联 CSS，但我建议您将其从 HTML 中移出。

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

Answer 2

它不起作用的原因是因为您在跨度上有内联样式

<span style="color: #FFFFFF;"

您可以通过在您的 CSS 中使用 !important 来覆盖它

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

Answer 3

删除以下内联样式，然后您的悬停将起作用。

style="color: #FFFFFF;"

相反，使用这样的 CSS 样式：

.subcategories .subcategory a span{
   color: #ffffff;
}