A:hover working weirdly


I’m having an issue with the hover state for some links. The first image is the normal link state, and the second is hovered. For some reason the left tip of the T and the right tip of the r are staying the original green color. I thought maybe it was because I’m not using a Web safe font, but I tried it with Arial, and it did the same thing. I’ve never seen this before, and have no idea how to fix it.

Any ideas that might help?

Hi, TriciaJoy, and welcome to the forums.

The attached images are awaiting approval before we can see them.

Sending a screen shot alone is like sending your doctor a picture of you and asking him/her why you don’t feel well.

In other words, we need to see the actual web page or a cut-down working example that demonstrates the problem before we can offer accurate advice.

Please read the following guidelines and get back with us with some code that will help us help you.

Thanks :slight_smile:

Thanks for the reply. Sorry about that. The site isn’t live, so I didn’t know how else to show it.

Hopefully my code isn’t too confusing. It is only my second site, so I’m still getting the hang of it, and organizing my code.

Here is a CodePen of it. I left out the images, but the problem is most visible with the link to Tumblr near the bottom, above the footer. It also happens on the tip of the descender of the Js in the e-mail address at the top and bottom.

Also, I just noticed that it doesn’t do it in Firefox. Just does it in Chrome and Safari.

This is a speculative answer… :slight_smile:

This seems to be a webkit issue. The anomaly happens in Chrome and Opera, but not FF nor IE8.

The pixels that smooth those outer-most points at the edges of the text box are outside the box and are not being re-colored when hovered. I added one pixel to the anchors (line 23) and worked around the issue. You might turn up something more definitive by googling.

Interesting problem.


It seems to be a webkit bug with the way its sub pixel antialiasing works in certain circumstances which also occurs in transforms and rotations.

For transformations the fix is to trigger the 3d rendering mode which cures the problem so the same fix could be applied here.

Add a class to the anchor concerned and add these styles.

  -webkit-transform: rotate(0) translate3d( 0, 0, 0);

Be careful with rules like this:

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
	font-style: normal;
	text-decoration: none;
	font-family: "Helvetica Neue", "Arial", sans-serif;

That will kill inheritance and sidestep the purpose of the cascade. Only apply properties that are not inherited via the blanket use of the universal selector otherwise inner elements will not inherit the font-size of the parents. Margin,padding and borders are ok (as they are not inherited) but font size, family and other properties should be applied to the body element instead so that they cascade in the normal way.

Thanks guys! I’ll try that in the morning.

The universal css was on the code my boyfriend gave me so I just left it there. I will look into that.

Still haven’t figured out how to fix it.

Can you explain what you mean by “added one pixel to the anchors”, please?

Paul’s solution didn’t fix it? Are you sure you implemented it correctly?

All I meant was that I added 1px of padding to the anchor.
(That was oddly worded, wasn’t it :-\ )

I tested the solution again (just in case) and it seems to work fine for me on that codepen example.

As you say adding a 1px horizontal padding should work also :slight_smile:

How do I add 1px horizontal padding when the width isn’t set? Can you show me? I am confused.


Either give a class to the troublesome element or in your exampe you could do this.

#sketchbook a {
    padding-right: 1px;

You can add horizontal padding to most anything. You don’t need a width to do it.

Omg duh. Sorry I am braindead lately. Thanks! That fixed it.