-
Posted in : Read WP
-
How can I change the default light gray background color when hovering over linked elements in the content section of my site to a custom color, without affecting the background color when mousing over the main nav categories.
I placed this custom css code in Theme Options > Style > Custom CSS field:
.site-content a:hover { background-color: #F3F3FF; }When you go to http://crocusreview.com/posts/ you will see that this changed the background color when hovering over the author name, but not when hovering over the article headline or “Continue Reading” (background color for these remains light gray).
What css code can I use to get all three of these elements to have the same custom background hover color?
What css code can I use if I choose to have no background color when hovering over these elements, and instead want the text to be underlined on mouse-overs (like what happens in the main nav)?
Thanks,
Gary
Please disregard the above message.
Instead, I’d like all anchor text on my site (including linked article titles and underlined anchor text in meta entry line) to have no background color upon hover, but instead have the text change color from default color to #003399 on hover.
Also, if easily accomplished, how can I have anchor text of links I place in the body of my articles indicated with a dotted underline (like anchor text in the meta entry lines) and then have the text color change to #003399 with mouse-over/hover?
Thanks,
Gary
Hi,
– article hover:
.entry-title a:hover { background-color: #F3F3FF; }– read more:
.entry-content a.more-link:hover { background-color: #F3F3FF; }Note: use
transparentword instead of a color code if you want to hide a color.Hi Mehmet,
I’m sorry for the confusion. Instead of this change, please see my second message (January 19) above.
Thanks,
Gary
Ok, try this:
– no bg color on hover:
a:hover { background-color: transparent ; }– your text color on hover:
a { color: #003399; }Note: check out Appearance > Customize > Colors.
Hmm… This did not work.
Also, I went to Appearance > Customize > Colors and changed Link Color, Link Hover Color and Menu Active color to #003399. This works for anchor text I add to the body of pages (see http://crocusreview.com/crocus-review-is-coming-soon/) and for the active header in the top nav menu, but it does not change the default appearance of links in post headlines, entry meta, “Continue Reading” links, headlines of posts on Archive pages, etc.
Gary
Hi, try this custom css code;
.entry-meta a:hover, .site-content h1 a:hover, .nav-single a:hover, .comment-meta a:hover, .comment-reply-link:hover, .navigation a:hover, .post-pagination a:hover, .related-posts a:hover, .archives a:hover, .entry-content a.more-link:hover, .launch-wrap a:hover { color: #003399; background-color: transparent; } .entry-meta a:active, .nav-single a:active, .comment-meta a:active, .comment-reply-link:active, .navigation a:active, .post-pagination a:active, .related-posts a:active, .archives a:active, .entry-content a.more-link:active, .launch-wrap a:active { color: #003399 background-color: transparent; }Works great! Thanks!
-Gary
You must be logged in and have valid license to reply to this topic.