Inserting curves into a:hover?

MagSafe · 2 Nov 2006 at 11:01

Hi there,

This isn't to important, but i'm wondering if anyone knows of a way to insert 2 images onto either side of a link when a user hovers over it.

So for example, you would have normal a:link properties, such as background: #fff; ... but then when a user hovered over the link a:hover would have a new background colour and then 2 curves (images) so it would look like the link was inside a circular enclosure.

I thought of just putting in a background image but each link would change in size so there would be no way in knowing the size required for the image. Ideally setting the left and right border with images is what i'm after, but that won't work as css doesn't allow it.

Thanks,

Steven.

JonD · 2 Nov 2006 at 11:23

Hmm, I think the only way would be using one bg image.

unwashed potato! · 2 Nov 2006 at 11:33

can't you just use a bg image and then if the link is bigger, just add a width to the image to make it the right size? or if the link is small then just make it smaller again with the width?

MagSafe · 2 Nov 2006 at 13:22

The links will be read in from a database that will be managed externally, so i'm not to sure that would be the best idea...

Hmm, i might have to give the idea a miss, i thought at first the background image would stretch automatically, but then remembered it will only repeat itself, although ... if i were to create an image that was really long wouldn't it compress into the correct size for a small link?

LazyManc · 2 Nov 2006 at 14:22

It's difficult to do with pure css alone, at least until CSS3 which will have border-images, but that's lightyears off any kind of widespread browser support (we still don't have full CSS2 support in most browsers!).

It can be done with javascript, but you have to decide if it's worth the hassle. Otherwise you could just use 2 seperate images for the full link, one for default state and one for hover.

LazyManc · 2 Nov 2006 at 14:24

MagSafe said:
The links will be read in from a database that will be managed externally, so i'm not to sure that would be the best idea...

Hmm, i might have to give the idea a miss, i thought at first the background image would stretch automatically, but then remembered it will only repeat itself, although ... if i were to create an image that was really long wouldn't it compress into the correct size for a small link?

Nope, it would crop the background around the width of the element.

Lovemonk · 2 Nov 2006 at 20:43

By careful use of the right background image, couldn't you use Sliding Doors for this?

Alistapart Sliding Doors

growse · 2 Nov 2006 at 21:43

Lovemonk said:
By careful use of the right background image, couldn't you use Sliding Doors for this?

Alistapart Sliding Doors

For sliding doors, you need a wrapping element. If you only want the image to appear on mouse hover, you'd need an element which supports the :hover. Usually, li:hover is used, which works in FF/Opera, but not IE6. Don't know about IE7 - they say they've fixed it....

If you're not worried about IE6 support, then sliding doors is ideal.

joeyjojo · 2 Nov 2006 at 22:25

Works nicely if you can have them all the same width.

Use li. Set width and padding on either side. li:hover has a background image. Easy. Just thinking about a variable width solution though...