CODEWITHSUNDEEP
htmlcss
Christoph C.
Christoph C.

Reputation: 938

CSS settings for boxes

I try to find a solution for a few hours now but I do not know how to do this. It is maybe a simple thing and I hope someone can help me out.

I created three boxes. Those boxes have a border at the top and change their background colours as soon as you scroll over with your mouse.

Screenshot without hover effect: https://i.sstatic.net/sXAPs.png

Screenshot with hover effect: https://i.sstatic.net/QOcJ5.png

My problem is now, that I also need the colour of the title and the text in another colour (#ffffff)! I do not know how I have to change my .css!

Here is what I did:

.frontpage-box {
    position: relative !important;
    border-top: 8px solid #233c5b !important;
    background: #eeeff1 !important;
    height: 280px !important;
}


.frontpage-box:hover {
    cursor: pointer;
    position: relative !important;
    border-top: 8px solid #daaf36 !important;
    background: #233c5b !important;
    color: #ffffff !important;
}

Can you tell me what is wrong? How do I have to change the code, so that the font color will be "white" after hover.

Thanks in advance, Chris

Upvotes: 0

Views: 47

Answers (1)

Matt Ginn
Matt Ginn

Reputation: 294

Without seeing your full code you would want to do

.frontpage-box:hover p { color: #fff }

and not set it in .frontpage-box:hover with the important.

Upvotes: 1

Related Questions