在悬停时更新跨度颜色

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 或在您的样式中添加重要标签 sheet。

这将起作用：尽管最好不要使用内联 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;
}

在悬停时更新跨度颜色

Updating span color on a hover

html

css

colors

discourse