Comments on: CSS Link Hover Effects (aka Rollovers)

By: Lesa

Lesa — Sun, 21 Jun 2009 16:38:12 +0000

Thanks to Cameron Chapman for including this tutorial in her article, "7 Rich & Creative User Interfaces and How to Create Your Own."

By: Lesa

Lesa — Mon, 13 Apr 2009 08:01:22 +0000

It turned out to be a good test, then. Excellent job!

By: Jeff

Jeff — Mon, 13 Apr 2009 07:59:19 +0000

Haha I was having a devil of a time getting it to work

By: Lesa

Lesa — Mon, 13 Apr 2009 07:03:22 +0000

Hi Jeff,

You’re absolutely right about the background-position and color, but border-color isn’t needed. Somehow I managed to explain that correctly, but must have had the old CSS in my clipboard when I tried to paste the new version in.

Thanks for helping me fix that.

By: Jeff

Jeff — Mon, 13 Apr 2009 01:55:44 +0000

Ah… discovered the problem.

background-position: center bottom; ((( missing from the proposed solution )))
border-color: #f00;
color: #fff; ((( instead of background: #fff; which overwrites the image )))

By: Jeff

Jeff — Mon, 13 Apr 2009 01:30:22 +0000

There is some missing information on this page.

The line starting with “border-color doesn’t do anything …” is apparently broken in IE, and the proposed solution:

ul li a:hover {
border-color: #f00;
background: #fff;
}

does not reposition the image.