by kirupa |
10 May 2013
A link's hover state is very similar to cardboard boxes. The
fun things you
can do with them are endless. One fun thing that you will
learn about in this article is how to have a background
color slide into view when you are hovering over a link.
This is a companion discussion topic for the original entry at http://www.kirupa.com/html5/sliding_background_effect_on_link_hover.htm
After a bunch of feedback over the years, this article has now been largely rewritten to (hopefully) be better
One thing that some of you may notice in Chrome is that our gradient trick often leaves behind some evidence of the trickery:
Notice the thin black line appearing to the right of George Costanza, for example. That is the result of our black background not fully having disappeared from view. This is caused by how Chrome processes gradient stops, and there is a that hasn’t been fixed in quite some time. Latest attempted fix: https://bugs.chromium.org/p/chromium/issues/detail?id=233879
I’ll file a bug on this at some point in the near future if I can repro it on another machine as well.
You said something about the background repeat being relevant but didn’t talk about it later?
Good catch, @nosplashurinal ! The background-repeat is important because when we are adjusting the background-position, we are moving in a direction the original background wouldn’t appear on unless the background repeated. I’ll go back and make an update on that shortly.
Is this happening on the examples in the tutorial as well? Or is it just in your local version? If it is your local version, can you share your HTML file?
This was what I saw while viewing your tutorial from you site in the latest version of Chrome on a Windows Pro machine. I had not saved a version to my machine.
BTW, I do not see this effect in the latest editions of Firefox or Firefox Developer edition but I do see in the latest version of the Opera browser (which is not surprising)
That is strange, for I tried on a Windows machine and I am unable to repro this problem:
I wonder if there is a bug in the underlying Chromium components that kicks in on some hardware but not others. I’ll keep fiddling with this in the meantime
My Chrome was just updated to Version 77.0.3865.90 (Official Build) (64-bit) and I still see what I’ve reported in it.