Comments on: Advanced hover states using CSS

By: jaime

jaime — Sun, 15 Jan 2012 03:34:12 +0000

media=”handheld” it stops working, would you mind to recomend me something to repair this issue?

thanks

By: jaime

jaime — Sun, 15 Jan 2012 03:12:53 +0000

Really good tutorial. Thanks for share your knowledge.
i used your css and it works perfect, but when i put
it doesn´t work. Any advice about it.

Thank you

By: Ryan Seddon

Ryan Seddon — Sun, 23 Oct 2011 04:44:02 +0000

@Kristen –

Not really imagemaps are notoriously difficult to any sort of css styling to them.

By: Kristen

Kristen — Wed, 19 Oct 2011 03:02:15 +0000

Is it possible to use this technique on an imagemap so that there’s multiple captions? I don’t like the feel of using tooltips as the caption.

If so, how? I’m pretty new at the whole CSS concept.

By: DoMo

DoMo — Fri, 07 Oct 2011 23:56:08 +0000

I was looking for quite some time to find this solution, thank you very much for this tutorial!

The ability to overlay and edit the content without ever having to open an image editor is fantastic.

By: Peter

Peter — Sun, 19 Jun 2011 00:56:42 +0000

Never mind. I figured it out “The Flashing Text in Two Colors question.” But thanks anyway.

By: Peter

Peter — Sat, 18 Jun 2011 23:54:08 +0000

I spent three days racking my brains out over this issue and finally came upon your coding. I am not a programmer, but have become somewhat proficient due to lack of competent help. Your code was the answer and after some simplifications and modifications it worked absolutely great!!! You’re fantastic. Thanks for posting this helpful information.

I have another question. I am trying to make an instruction string of text flash in red and yellow back and forth constantly with adjustable time intervals. I use a MAC and mostly firefox 4.X, but would want this to work in Safari, Explorer and any other major, noteworthy browsers. Would you happen to know the coding for that function? I can talk by phone too if you want, but I’ll check off your e-mail box for now. Thanks.

Peter

By: Jessica

Jessica — Thu, 12 May 2011 21:54:05 +0000

Thanks for this code! It’s a vast improvement to the image mouseover I would have gone with otherwise.

By: jonnypixel

jonnypixel — Wed, 04 May 2011 02:00:06 +0000

Hey that rocks,

can be applied to any size image as a hover effect! much better than calling a secondary .png especially if the image is 800px wide on the page and you want a hover effect on that!

Thanking you very muchly :-)

plus you can echo any php you might have straight over the top woo hoo!

By: The Css Ninja

The Css Ninja — Thu, 21 Apr 2011 02:30:59 +0000

@Michael –

You could have two spans in your description container that alternate the display of them based on the :hover pseudo-class.

 
    No hover
    Hover

And then in the CSS just select the hover to show and the other span to hide when the anchor is hovered over.

a:hover .caption01 span {
    display: none;
}
a:hover .caption01 .hover {
    display: block;
}