Custom hover background color or underlining

Posted in : Read WP
CrocusReview
Participant
18 January 2014 at 04:29
#11577

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

CrocusReview
Participant
19 January 2014 at 08:31
#11592

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
Mehmet S.
Keymaster
22 January 2014 at 03:52
#11674
Hi,

– article hover:
```
.entry-title a:hover { background-color: #F3F3FF; }
```
– read more:
```
.entry-content a.more-link:hover { background-color: #F3F3FF; }
```
Note: use transparent word instead of a color code if you want to hide a color.
CrocusReview
Participant
22 January 2014 at 08:56
#11691

Hi Mehmet,

I’m sorry for the confusion. Instead of this change, please see my second message (January 19) above.

Thanks,

Gary
Mehmet S.
Keymaster
23 January 2014 at 05:06
#11719
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.
CrocusReview
Participant
23 January 2014 at 09:54
#11723

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
ahmetsali
Keymaster
23 January 2014 at 14:19
#11728
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; }
```
CrocusReview
Participant
23 January 2014 at 18:19
#11737

Works great! Thanks!
-Gary

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item

Read WP - Minimalist WordPress Blog Theme

by pixelwars