Now we are going to move on to CSS mouseovers. They are really simple. These mouseovers are for those of you who aren’t too good with graphics editors. Get rid of all the stuff we did before, and start with this.
<div> <p><a href="http://www.free2code.net">Home</a></p> </div>
Nothing special here, just a link in a paragraph inside the div tag. In case you don’t already know, the div tag doesn’t do anything on it’s own.
Class the paragraph and the div.
<div class="block"> <p class="home"><a href="http://www.free2code.net">Home</a></p> </div>
Now put the style tags in the head section.
<style type="text/css"> </style>
Add the selector for the classes home and block.
<style type="text/css">
.block
{
}
.home
{
}
</style>
Make sure you do things in this order, or when the style sheet cascades, funny things might happen.
Now you will see the use of the div tag. It will be our background. Don’t worry about any of the colors until the next lesson, they are only there to show you the size of certain elements. In fact, the colors I’ve picked don’t even match.
<style type="text/css">
.block
{
background-color: #009900;
width: 150px;
text-align: center;
}
.home
{
}
</style>
View it.
The paragraph is used for the text in the button.
<style type="text/css">
.block
{
background-color: #009900;
width: 150px;
text-align: center;
}
.home
{
font-size: 18px;
font-weight: bold;
text-align: center;
}
</style>
Now it’s starting to look like a button.
Add the last two selectors.
<style type="text/css">
.block
{
background-color: #009900;
width: 150px;
text-align: center;
}
.home
{
font-size: 18px;
font-weight: bold;
text-align: center;
}
.home a
{
}
.home a:hover
{
}
</style>
.home a will affect the link inside of the element .home, which is our paragraph. .home a:hover also affects the link, but only when the mouse is hovering over the link.
For the sake of clarity and room, I will not show the first two selectors. Only the selectors we are working with. But keep them in your document.
First, the normal link of the button.
<style type="text/css">
.home a
{
padding: 5px;
width: 90%;
text-decoration: none;
display: block;
background-color: #ff0000;
color: #336699;
}
.home a:hover
{
}
</style>
In case you don’t know, display: block makes the link act as a block element. This means, apart from any padding and width attributes, the block element will take up all the room of it’s parent element. A parent element is an element with another element in it, like a link in a paragraph.
Now for the hover affect.
<style type="text/css">
.home a
{
padding: 5px;
width: 90%;
text-decoration: none;
display: block;
background-color: #ff0000;
color: #336699;
}
.home a:hover
{
background-color: #000000;
color: #33ccff;
}
</style>
And there you have it! A basic CSS mouseover.
One popular effect that people usually use JavaScript for is a 3d push in type effect. Just add some borders. But first, let’s make the colors look a little better.
<style type="text/css">
.block
{
background-color: #ffffff;
width: 150px;
text-align: center;
}
.home
{
font-size: 18px;
font-weight: bold;
padding: 10px;
text-align: center;
margin-bottom: 3px;
margin-top: 3px;
}
.home a
{
padding: 5px;
width: 90%;
text-decoration: none;
display: block;
background-color: #00cc66;
color: #990033;
}
.home a:hover
{
background-color: #009966;
color: #993333;
}
</style>
Now it looks like a real mouseover. It’s got a lowlight effect (the opposite of a hightligh effect).
Now we add some borders.
<style type="text/css">
.block
{
background-color: #ffffff;
width: 150px;
text-align: center;
}
.home
{
font-size: 18px;
font-weight: bold;
padding: 10px;
text-align: center;
margin-bottom: 3px;
margin-top: 3px;
}
.home a
{
padding: 5px;
width: 90%;
text-decoration: none;
display: block;
background-color: #00cc66;
color: #990033;
border-top: #00cc66 solid 2px;
border-left: #00cc66 solid 2px;
border-bottom: #006666 solid 2px;
border-right: #006666 solid 2px;
}
.home a:hover
{
background-color: #009966;
color: #993333;
border-top: #006666 solid 2px;
border-left: #006666 solid 2px;
border-bottom: #00cc66 solid 2px;
border-right: #00cc66 solid 2px;
}
</style>
See how it looks as if it get’s pushed in? But why is that? It’s simple. The lowlight effect helps. For that, you make the background-color of the .home a:hover slightly darker, making it look like it goes lower. The top and left borders for .home a are the same, and the bottom and right borders are the same colors as each other, giving a 3d effect. Then, the .home a:hover borders colors are reversed. The top and right borders switch colors with the bottom and left colors. With all of the border properties, solid 2px has been added. This tells the browser the border is solid and it’s 2px thick.
