html - div 悬停不应用颜色 CSS

Question

我遗漏了一些在这里可能很明显的东西。

我试图将字体颜色更改为 #fff(白色)，但它不起作用。我的背景正在应用，但是 color: #fff; 不适用于我的字体文本和字体图标。 !important 的这种用法也不起作用。

HTML:

<!-- Categories  -->
    <div class="row categ">
       <!-- ACCOUNTING/FINANCE -->
        <a href="#">
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 categ-area text-center">
            <span class="icon-accounting"></span>
            <h3>ACCOUNTING/FINANCE</h3>
        </div>
        </a>
    </div>

CSS:

    a .categ-area:hover{
    background-color: #58ba2b;
    color: #fff;
}

截图示例:

https://jsfiddle.net/dqt89276/1/

Answer 1

您也可以向子元素添加悬停状态。

a .categ-area:hover, a .categ-area:hover span{
    background-color: #58ba2b;
    color: #fff;
}

https://jsfiddle.net/dqt89276/3/

编辑:添加了 jsfiddle