CODEWITHSUNDEEP
htmlcsshover
Andrew C. Duarte
Andrew C. Duarte

Reputation: 237

div hover not apply color CSS

I'm missing something which is probably obvious here.

I'm attempting to change the font color to #fff (white) however it is not working. My background is applying, however, the color: #fff; is not applying to my font text and font icons. This use of !important also does not work.

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

Screenshot Example: enter image description here

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

Upvotes: 1

Views: 518

Answers (1)

Gezzasa
Gezzasa

Reputation: 1453

You can add a hover state to a child element too.

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

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

EDIT: added jsfiddle

Upvotes: 1

Related Questions