Archived topic
CSS To Change the Font Color On Read More Button
3 replies · Started by Michelle on October 18, 2021
All Read More buttons on my site have white text on hover, except for the one on the Home page. The hover text on the home page is blue. I can't figure out what is wrong with the code:
/*Border around the Read More button on author and category pages and #222222 background on hover with white text on hover*/
.archive .read-more-container a:hover {
background: #222;
color: #fff;
border-color: #222;
}
.archive .read-more-container a {
border: 2px solid #d6d6d6;
}
Later I added:
p.read-more-button-container a {
border: 2px solid #d6d6d6;
}
p.read-more-button-container a:hover {
background: #222;
color: #fff;
border-color: #222;
}
#wpsp-3004 .wp-show-posts-entry-summary a:hover, #wpsp-3004 .wp-show-posts-entry-content a:hover{
color: white;
}
Hi there,
It's likely losing in precedence because WPSP's CSS is placed inside the content right before the list.
You can change the hover color by chnging this part:
#wpsp-3004 .wp-show-posts-entry-summary a:hover, #wpsp-3004 .wp-show-posts-entry-content a:hover{
color: white;
}To this:
section#wpsp-3004 .wp-show-posts-entry-summary a:hover,
section#wpsp-3004 .wp-show-posts-entry-content a:hover {
color: white !important;
}YES!! That did it!
Nice one. Glad you got it sorted. :D
