将背景图像滑动到图像链接后面

Question

So, i have this html webpage with a menu. I have coded the menu as a list with 3 links.

The menu consists of Illustrator png images : home, contact, etc. What i want to achieve is that a certain color slides from the left when you hover on the links. This certain color is also an Illustrator image.

I was able to do this (with a tutorial) with a simple plain text for the menu, the image for the background slide and jQuery: jQuery buttons , but I want to do this with 2 images.

Am i explaining myself correctly? How can I attempt to do this?

Answer 1

There are a few ways you can achieve this, here are 3.

1) Include the transparent image in your background image sprite. So you're combining both images and using it as a single background image. Then you just position the background image accordingly. If you're not familiar with sprites, here is a post that discusses them: CSS Sprite Button

2) Hard code the image into your link and use css to generate the background color. That way you don't have to use a separate image. For example: a:hover { background: #f00; }

3) Hard code the image into your link and use a background image to achieve the hover effect. I don't recommend this because it causes your links to become unsearchable and unselectable.