TinySigns

Hover effect on menu can be easily accomplished with the onmouseover event but that is old-school. The same can also be achieved using CSS with easy of having the code reusable and undemanding when it comes to editing the menu created, with a single image or no image at all.

You have already learned how to use create hover effects in Javascript and CSS using two images in the previous tutorial, Creating Menu Hover Effect: Javascript and CSS Compared. Now, we discuss other ways of achieving hover effects using CSS.

Using single image for hover effect

In the previous example, we used two different images to render the hover effect, now we will try to further minimize the use images by using only one image for both backgrounds.

The technique to this is combining both backgrounds in a single image; the two images from the previous example are combined into a single file with a dimension of 100px by 25px. The image slides to the left (50px, the width of a single image) upon mouse hover, giving the same effect as the two previous examples. Here is the code:

<style type=”text/css”>
<!–
.hovers_one_image {
background: #fff url(img_effect.png) no-repeat 0 0;
display: block;
height: 25px;
width: 50px;
}
.hovers_one_image:hover {
background: #fff url(img_effect.png) no-repeat -50px 0;
}
–>
<style>

<a href=”#single-image-hover-effect” class=”hovers_one_image”>CSS</a>

Here is a sample of the image used (Right-click and select Save-As):

The -50px 0 in the background property for the :hover is the secret to the whole thing.

Using no image for hover effect

You can also create a hover effect without using any image, but remember that this is limited to solid color hover only, no gradient effect to the hover.

We could use the previous code but need to change the background property to background-color property, so

background: #fff url(img_effect.png) no-repeat 0 0;
and
background: #fff url(img_effect.png) no-repeat -50px 0;

needs to be changed into

background-color:#FFFFFF;
and
background-color:#0000FF;

this will cause the background of the link to switch from white to blue.

Simple, isn’t it?

Well, it is. But we haven’t done any real hover menu yet. In the coming days, you will start creating your own hover menus with a Tiny Signs’ help.