Home » Internet » Web Designing » How to create CSS mouseover or rollover with images

How to create CSS mouseover or rollover with images



The mouseover and rollover effect not only beautifies your layout, it also helps your visitors realize that they are hovering their mouse pointer over a link. The mouseover and rollover effect can be achieved with images and without images. It is easier to create a mouseover or rollover effect using simple CSS techniques in the following manner:

a{
    border:1px solid #FFCC00;
    padding:5px;
    text-decoration:none;
    color:#000000;
}
a:hover{
    border:1px solid #FF6600;
    color:#FFFFFF;
    background-color:#000000;
    text-decoration:underline;
}

This CSS code changes the box color and the link text color when the mouse pointer is hovered over it. Padding of 5 pixels have been used to give a box-type look. Test it to know the effect.

With CSS you can use images, but mostly as background. It is something like this:

a{
    background-image:url(mouseoutimage.gif);
}
a:hover{
    background-image:url(mouseoverimage.gif);
}

You can try out different other CSS combinations to beautify your links further.

[tags]mouseover, rollover, CSS, web design[/tags]