Hover over Links Color

Resolved jtinn
(@jtinn)

9 years, 1 month ago

I have change my background to black and have my text, link and hover colors set as well, yet when I hover over a link the hover color is not proper, it is black like my background. It should be #4C94E0 . Any ideas?

An example is on this page: http://wavekinetics.com/products

BTW, It works fine in the navigation.

Thanks in advance.

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

Michael
(@alchymyth)

9 years, 1 month ago
the theme also styles those more specific links:
```
.entry-content a:focus,
.entry-content a:hover,
.entry-summary a:focus,
.entry-summary a:hover,
.widget a:focus,
.widget a:hover,
.site-footer .widget-area a:focus,
.site-footer .widget-area a:hover,
.posts-navigation a:focus,
.posts-navigation a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover,
.comment-metadata a.comment-edit-link:focus,
.comment-metadata a.comment-edit-link:hover,
.comment-reply-link:focus,
.comment-reply-link:hover,
.widget_authors a:focus strong,
.widget_authors a:hover strong,
.entry-title a:focus,
.entry-title a:hover,
.entry-meta a:focus,
.entry-meta a:hover,
.page-links a:focus .page-number,
.page-links a:hover .page-number,
.entry-footer a:focus,
.entry-footer a:hover,
.entry-footer .cat-links a:focus,
.entry-footer .cat-links a:hover,
.entry-footer .tags-links a:focus,
.entry-footer .tags-links a:hover,
.post-navigation a:focus,
.post-navigation a:hover,
.pagination a:not(.prev):not(.next):focus,
.pagination a:not(.prev):not(.next):hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover,
.logged-in-as a:focus,
.logged-in-as a:hover,
a:focus .nav-title,
a:hover .nav-title,
.edit-link a:focus,
.edit-link a:hover,
.site-info a:focus,
.site-info a:hover,
.widget .widget-title a:focus,
.widget .widget-title a:hover,
.widget ul li a:focus,
.widget ul li a:hover {
	color: #000;
	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
}
```
you need to take care of those as well.
sharonvillines
(@sharonvillines)

9 years, 1 month ago

I don’t have a clue why it isn’t working but have another suggestion –people who don’t have the best vision have a hard time reading white on black. It reads better if you use letter-spacing: 1px;

Blue si also hard to read. Since you have a nice image at the top in greys, I would choose one of them for your links.

Thread Starter jtinn
(@jtinn)

9 years, 1 month ago

Michael, thank you, but can you help me with this specific problem?

Thread Starter jtinn
(@jtinn)

9 years, 1 month ago

sharonvillines:

thank you for your suggestions.

Michael
(@alchymyth)

9 years, 1 month ago

that was the help – add thse styles – with your own color code – to your custom styles either in style.css of your child theme or via the ‘additional CSS’ section in ‘customize’ in the admin bar, or via ‘dashboard – appearance – customize’.

as you posted the same color for your :hover as seems to be used for the links, you won’t see any :hover effect…

Thread Starter jtinn
(@jtinn)

9 years, 1 month ago

Yes Michael I have attempted to do as you suggested, but I could not get it to work. As an example, I tried using:

.page-links a:hover
.page-number, {
color: #4C94E0;
}

It presented no change.

Thread Starter jtinn
(@jtinn)

9 years, 1 month ago

I am sorry Michael for my ignorance. I have done as you have suggested and it worked perfectly.

Thank you again!

north3d
(@north3d)

9 years ago

jtinn …. you have have managed to do exactly what I’m trying to with my site!

1) Black backdrop
2) Wide Column
3) Controle over Link and Hover Colors
How?

I tried putting Michaels code into the Additional CSS
but it had no effect …

I’ve been thrashing around looking for an editor
that would get me there … no luck yet 🙁

Is there a trick to using Michaels code?

Thread Starter jtinn
(@jtinn)

9 years ago

Make sure you have every character from his list. Once I did the entire list, it worked.

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

The topic ‘Hover over Links Color’ is closed to new replies.