Skip to main content
Inspiring
February 22, 2018
Answered

hover state & transition...

  • February 22, 2018
  • 1 reply
  • 751 views

Hi,

Not sure what's missing here, but the link transitions from the white to the darker color. However, from original template somewhere within the transitional shift, I can see a blue color. How do I target that if hover & focus are already "used up" below? - When I check the source, I can see the culprit which likes in original template. I did try to add .link a { } and with another color; but it's just not hitting it to make the alteration. Any recommendations?

.link a {

  color: #fff;

}

.link a:hover, a:focus {

  color: #551d1f;

}

in original WP template I am re-styling:

media="all"

a {

  1.    color: #337ab7;
  2.    text-decoration: none;}

Thank you.

    This topic has been closed for replies.
    Correct answer BenPleysier

    Try

    .link a {

      color: #fff !important;

    }

    .link a:hover, .link a:focus {

      color: #551d1f !important;

    }

    !important will override any persistent style rules within the original template.

    1 reply

    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    February 22, 2018

    Try

    .link a {

      color: #fff !important;

    }

    .link a:hover, .link a:focus {

      color: #551d1f !important;

    }

    !important will override any persistent style rules within the original template.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    r_tistAuthor
    Inspiring
    February 24, 2018

    Question: In WP, some of the styles work but others seem to need the override of important. Is it typical/best practice to have the important on several style rules? I mean, is that a standard practice on your custom CSS? - Just for my own knowledge.

    Thank you!

    B i r n o u
    Legend
    February 24, 2018

    it depends on the template use... in WP most of the important rules are used just to be sure that some admin addons, or some component won't be mis used... but in a general way using important is the last tools to be used when none of others ways will be usable.

    louis wrote something some times ago about the use of important... I should also read it again (I do'nt now)?....

    !important CSS Declarations: How and When to Use Them — Smashing Magazine