View Full Version : CSS Rollover

08-09-2007, 07:28 PM
Im creating a top navigational bar, and I seem to be having to problems with a roll over effect.

I'm trying to create a background colour appear behind the text when the cursor rolls over it.

I am also trying to do the same thing again, but this time I only want a bottom-border to be shown in my specified colour when the cursor rolls over the text.

08-09-2007, 07:54 PM
I don't know whether this will help.:D

Useful URL http://wellstyled.com/css-nopreload-rollovers.html

My website might also help.


This menu uses css to produce a picture when a thumbnail is hovered over.

Frank - alias effpeetee:thumbsup:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;

background-color: transparent;

div#thumbnails {
position: absolute;
bottom: 0;
left: 0;

.thumbnail:hover img{
border: 1px solid blue;

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
border: 1px dashed gray;
color: black;
text-decoration: none;

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 150px;
left: 90px; /*position where enlarged image should offset horizontally */
z-index: 50;


08-09-2007, 10:29 PM
for creating rollovers with CSS, this is what I do....I think this is what you are asking about:

#button1 a:link {background-color: blue; border: none;}
#button1 a:visited {background-color: blue; border: none;}
#button1 a:hover {background-color: red; border-bottom: 1px solid black;}
#button1 a:active {background-color: red; border-bottom: 1px solid black;}

hope this is what you are asking about.