Can't change Fancy Link appearance with CSS code

Brodovych

Hello.

There's a fancy link item in the footer http://dev2.task.ua/kontakti-2/

Now it's of default colores. I've inserted a CSS code into CSS field

.fancyFooter {

font-size: 12px!important;

font-family:"Roboto slab", sans-serif!important;

background-color: #505050!important;

text-align: center;

color: white!important;

}

.fancyFooter:hover {

background-color: #f6f6f6!important;

color: #000000!important;

font-weight:bold;}

No reaction except correct font sizing.

Is there an error in the code?

Thank you

Phil

Hello,

Please, add a "::before" to the second code. It should look like this:

.fancyFooter:hover::before{
   background-color: #f6f6f6!important;
   color: #000000!important;
   font-weight:bold;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Brodovych

OK? now it turns white on hover. But it's still blue on rest, though I want it to be grey (background-color: #505050!important;).

How do I fix this?

Thank you.

Phil

Please, use the following CSS code instead of the one you use.

.fancyFooter span{
   font-size: 12px!important;
   font-family:"Roboto slab", sans-serif!important;
   background-color: #505050!important;
   text-align: center;
   color: white!important;
}
.fancyFooter:hover::before{
   background-color: #f6f6f6!important;
   color: #000000!important;
   font-weight:bold;
   font-size: 12px!important;
}
.fancyFooter::before{
   background-color: #f6f6f6!important;
   color: #000000!important;
   font-weight:bold;
   font-size: 12px!important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next