div hover不适用颜色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