Rollovers

[xkyogre]

How do you make simple CSS rollovers?

Do you need lots of prior JavaScript knowledge?

[TheFilmGod]

You can do rollovers by javascript. No it doesn't require any prior knowledge. Just google it and find the code.

 

BUT, I heard CSS can do rollovers also, w/out javascript. - Which is even better because some ppl might have javascript disabled!!

[ToonMariner]

this is one that can be easily answered by the first 4 or 5 results on google fo  'ccs rollover'

 

my prefered method for image rollovers is lik ethis http://www.tanfa.co.uk/css/examples/rollover-images-no-preload.asp (not read it all but sure its pretty much how I first discovered the method.)

[dbrimlow]

Basically, the simple rollover solution (where the width and heights are the same) uses a different image for the specific a:hover, a:visited of an class or ID.

 

Example. Here http://www.regisresidential.com, I made 2 small images (2px wide by 20px high) - one red, one blue - to use for the links hover.

 

#navcontainer a, #navcontainer a:visited {

display: block;

padding: 0px 5px 4px 4px;

width:150px;

background: #800000 url(../images/roundlinks2.jpg) repeat-x;

border-bottom: 1px solid #FFF;

text-decoration:none;

color:#FFFFFF

}

 

#navcontainer a:hover, #navcontainer a:active {

background: #336699 url(../images/roundlinks.jpg) repeat-x;

}

 

Upon hover, the link background image changes from red to blue. Simple.

 

You use the same technique for text based links. Changing the text color, background color and border color on hover.

 

But be very careful. Whenever designating a:link elements in a style sheet, the proper order is absolutely required. You MUST list  a:link and a:visited BEFORE a:hover and a:active.

 

If you have initially designated all four link TAGS, then you MUST do the same for any modifications of links for a class or ID later.

 

example - if you designate the actual link TAG:

 

a {color:#0000FF} (or a:link)

a:visited {color:#000099}

a:hover {color:#FF0000}

a:active {color:#FFFFFF}

 

Then whenever you modify the link tags for a class or ID you must also re-designate the visited, hover and active:

 

example - class/id links:

 

.item a:link {color:#9999CC}

.item a:visited {color:#9900FF}

.item a:hover {color:#CC66CC}

.item a:active {color:#CCCCCC}

 

If you leave out the visited, or put them in the wrong order ... you will pull your hair out debugging because it will default to the initial TAG designation.