html - div悬停不适用于颜色CSS

我想念的东西可能在这里很明显。

我正在尝试将字体颜色更改为#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/

最佳答案

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

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

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

编辑：添加了jsfiddle