3 replies [Last post]
Last seen: 14 years 42 weeks ago
Joined: 2004-06-04
Posts: 57
Points: 0

Can someone break down what each element of the mouse over button does in CSS? Or point me to a link where it breaks it down and explains how it works? Just to clarify in case it's not clear I mean where a link is set to display as a block, and when you put your mouse over it the background color of the box changes color. Thanks.

bpat1434's picture
Last seen: 14 years 37 weeks ago
Timezone: GMT-5
Joined: 2004-09-17
Posts: 127
Points: 0

Trying to undersatand mouseover buttons in CSS

What each element is is really kinda self explanatory.

To do what you wanted you first have to know a little bit about links in general.

There are different states that links can take on: normal, hover, active, visited, and link. Here's a breakdown (as of my knowledge) of each state:

CSS Code || Link State || What it does
a Normal What your browser will display.
a:link Normal Link What your broswer will display as a default link.
a:active Active Link What browser will display when the link is being clicked.
a:visited Visited Link How the link is displayed if you've already visited it
a:hover Hover Link How the browser will display a link when the mouse rolls over it.

So, to answer your specific example question in your post, to change the color of a background when you roll over a link, you would code it as this:

.styleClass a,
.styleClass a:link,
.styleClass a:visited {
color: #0000FF; /* Color of the Text for the Link */
border-bottom: 1px dashed #0000FF; /* Design for bottom of link instead of the normal solid underline */
font-family: "Times New Roman", Times, serif; /* Font of the text for the link */
font-weight: bolder; /* How heavy do you want your link? Options are bold, bolder, normal, or a numerical value */
font-variant: small-caps; /* Options to beautify your text */
background-color: #FFFFFF; /* Color of the background behind the text within the <a></a> tags */
text-size: 12px; /* Size in pixels that the text should be. Normal, Large, Small, Smaller, Larger, x-large, xx-large, x-small, xx-small work as well */
text-transformation: capitalize; /* Choose what transformations to put on your text */
text-align: left; /* Choose how your text will align in the document */

Now, you need to define your hover and active states...

.styleClass a:hover,
.styleClass a:active {
color: #0000FF;
border-bottom: 1px dashed #0000FF;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-variant: small-caps;
background-color: #0066CC;
text-size: 12px;
text-transformation: capitalize;
text-align: left;

What this code will do is when you have a link defined in the class "styleClass" of your document, it will have a border on the bottom, and be colored blue; however, when you roll over it, the background will change from white to light blue.

A simple transformation.

I hope I helped you out some. If you want to know what more functions do, or even find out what their values are, go to the w3c website and go under their CSS definitions, you can find it here.

You can also find out what all the link definitions mean here.


Hugo's picture
Last seen: 7 years 38 weeks ago
Joined: 2004-06-06
Posts: 15668
Points: 2806

Trying to undersatand mouseover buttons in CSS

bpat1434 You need to be careful when helping as the order of those psuedo classes are wrong, twice actualy.

They must run as link, visited, hover, active .

I think Jhorra was also looking for an explanation of using display block to allow dimensions to given to the link so the background hover change will effect a box rather than just the text .


Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

South Carolina
Last seen: 15 years 49 weeks ago
South Carolina
Joined: 2004-08-15
Posts: 136
Points: 0

Trying to undersatand mouseover buttons in CSS

As far as creating mouse-over "buttons," I've not found a better creation technique than the one found under the "Sliding Doors" tutorial at alistapart.com.

Hope this helps. You can see an example of the buttons in action on the navbar at liz.thewaytech.com/new/

You can't win, you can't lose, you can't break even. You can't even get out of the game!