Comments on: 4 Ideas For Styling Link Hovers With CSS

By: Rohit

Rohit — Mon, 14 Nov 2011 19:17:08 +0000

i cant do the opacity css in my link… can u tell me why??? i am pasting my html

and in the css i have written
a {
position:fixed;
top:200px;
left:375px;
}
a:hover {position: relative; top: 2px;}
img {
position:fixed;
top:200px;
left:375px;
}

By: Vivian

Vivian — Mon, 19 Sep 2011 23:45:02 +0000

Can anyone help? This is the css code I have for my links so that when I hover over them the text displays as white.
.custom a:hover { background: #D31D8C; color: #FFFFFF; !important; }

This works on my Home page, but on my Links & Resources page, no text is seen when I hover. What must I do?

Thanks, Vivian.

By: Ash

Ash — Sun, 16 Jan 2011 09:28:50 +0000

I’m sure gonna be using the opacity trick. I love it!

By: Brett Widmann

Brett Widmann — Sun, 09 Jan 2011 04:01:20 +0000

I really like these ideas. Thanks for the code!

By: Véronique

Véronique — Sat, 16 Oct 2010 17:02:30 +0000

Hello, how can I manage to change the opacity of a div (instead of an image as shown in your demo) when I hover it? I tried and succeeded with an image but cannot find any answer when hovering a div (with a background image repeat-x). Thank you very much!

By: Jon Rawlins

Jon Rawlins — Mon, 27 Sep 2010 16:00:49 +0000

It’s a shame that opacity alone doesn’t work in IE, even ie8 doesn’t support it without hacking it. A few things to think about is when you use a background image which is positioned, and then the hover is respositioned it will generally transition between the two which isn’t always a good thing. So it slides up for example when you have created Tabs. Therefore giving it the wrong feel totally.

Jonathan

By: Tony

Tony — Mon, 30 Aug 2010 07:45:46 +0000

I like to combine both text shadow and transition. Has a really neat effect.

By: Matt Dunn

Matt Dunn — Wed, 28 Jul 2010 01:59:19 +0000

That’s a sweet idea.

By: Matt Dunn

Matt Dunn — Mon, 26 Jul 2010 16:58:33 +0000

Yep. Transition only works on Webkit-based browsers right now such as Safari (and Chrome). Hopefully soon -moz will kick in. Luckily it falls back to a regular hover.

By: ivan

ivan — Mon, 26 Jul 2010 16:55:41 +0000

transition doesn’t work on my firefox 3.6.8 or maybe i can’t see what really it do, in my case just is a normal change color,

excellent tips