Help with CSS for link colours required

  • Resolved Lois Pallister

    (@lois-pallister)


    9 years, 2 months ago

    I am using a plugin that allows me to add CSS code to the site as a whole and to each page or post.

    Everything I have added so far has worked perfectly and I can’t understand why this isn’t working:

    .page-id-868 a:link{
    text-decoration: bold;
    color: #2ba6fc;

    .page-id-868 a:hover{
    text-decoration: bold;
    color: #ffffff;
    }

    This code does turn the link blue but the hover is just not working.

    Should I be writing the code differently?

Viewing 9 replies - 1 through 9 (of 9 total)

  • Do you have a link to the site in question where that link is? Maybe your selector is slightly off.

    Thread Starter Lois Pallister

    (@lois-pallister)

    Yes it is here: The blue text at the bottom of the page.
    I thought if a:link worked then a:hover should work.

    Thank you for your help.

    https://colourityou.co.uk/the-colour-it-you-duvet-cover/

    Hi Lois,

    It looks like maybe your hover settings are being overwritten but other code for when the link has been visited.

    .page-id-868 a:visited {

}

    I’m not sure what you’d like your links to look like when someone has visited them already but you would insert that code within the above.

    Also, just a note that for your text-decoration CSS property, bold is not an option (https://www.w3schools.com/cssref/pr_text_text-decoration.asp) That would more likely be achieved by increasing the font-weight property.

    Thread Starter Lois Pallister

    (@lois-pallister)

    I wanted the link to remain blue after it has been visited.
    Thanks for the note re ‘bold’.
    Maybe that is the problem.

    Thread Starter Lois Pallister

    (@lois-pallister)

    I removed the text decoration and even added !important but it still won’t work!

    I’m confused!

    Maybe the following?

    .art-footer-text a:visited {
   color: #2ba6fc;
}

.art-footer-text a:hover {
   color: #2ba6fc;
   font-weight: bolder;
}
    Thread Starter Lois Pallister

    (@lois-pallister)

    It wasn’t the footer text I wanted to change but the line in the text of the body of the page.

    I have put the footer text right now by using art-postcontent.

    I have got it to work
    By simply turning them round and putting the hover rule before the link colour rule!

    Very odd!
    But sorted.
    Thanks so much for your help ??

    Thread Starter Lois Pallister

    (@lois-pallister)

    This is odd indeed.
    It no longer works if I remove the !important from the hover colour.

    And it only works if the a:hover is before the a:link

    But it is working and I am very glad about that as I want different link colours on every page with them all white on hover.

    I just wish I knew why that is.
    On all my hand coded web sites I always used the order
    link
    hover
    active
    visited

    Hope it stays working!

    Thanks again – issue resolved.

    Thread Starter Lois Pallister

    (@lois-pallister)

    Just in case anyone else wants help
    I change the url of the page:

    https://colourityou.co.uk/restful-sleep-is-so-important/

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Help with CSS for link colours required’ is closed to new replies.