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;
}

在悬停时更新跨度颜色

3 个答案: