The Cheap Web Hosting Report

Ever seen those fancy links where they change the appearance as soon as you place your mouse cursor on them. See a simple example of a rollover effect here. The CSS definition of this simple example goes like this:

== Code begins ==

<style>

body{
background-color: #FFFFFF;
font-family: Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#nav{
width: 150px;
}
#nav ul{
display: inline;
}
#nav ul li{
list-style-type: none;
line-height: 150%;
}
#nav ul li a{
color: #6495ED;
text-decoration: none;
border-bottom: #6495ED 1px dotted;
}
#nav ul li a:hover{
color: #DC143C;
text-decoration: none;
border-bottom: #DC143C 1px solid;
}

</style>

== Code ends ==

This sort of rollover simply changes the color or the look of the underline.

Now let us move on to some complex looking rollover. To see what I am talking about, have a look here. First let us view the entire CSS definition of this rollover menu and then we shall discuss what all is happening.

== Code begins ==

<style>

body{
background-color: #FFFFFF;
font-family: Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#nav{
width: 150px;
}
#nav ul{
display: inline;
}
#nav ul li{
list-style-type: none;
line-height: 150%;
border-left: #000000 8px solid;
border-top: #000000 1px solid;
border-bottom: #000000 1px solid;
border-right: #000000 1px solid;
background-color: #BDB76B;
margin-top: 5px;
}
#nav ul li a{
color: #000000;
text-decoration: none;
display: block;
padding-left: 10px;
padding-right: 10px;
}
#nav ul li a:hover{
color: #FFFFFF;
background-color: #4682B4;
text-decoration: none;
}

</style>

== Code ends ==

And this is how you use it:

== Code begins ==

<div id="nav">
<ul>
<li><a href="#">This is link 1</a></li>
<li><a href="#">This is link 2</a></li>
<li><a href="#">This is link 3</a></li>
<li><a href="#">This is link 4</a></li>
</ul>
</div>

== Code ends ==

While defining your CSS layout, once you define a main DIV ID, you can define all the tags that belong to that ID; for instance here we have the main DIV called #nav (<em>let it be small for "navigation"</em>). All the tag definitions preceded by #nav belong to this particular DIV ID. Take for instance

== Code begins ==

#nav{
width: 150px;
}

#nav ul{
display: inline;
}
#nav ul li{
list-style-type: none;
line-height: 150%;
border-left: #000000 8px solid;
border-top: #000000 1px solid;
border-bottom: #000000 1px solid;
border-right: #000000 1px solid;
background-color: #BDB76B;
margin-top: 5px;
}

== Code ends ==

As you can see, there is a DIV with an ID nav. This DIV with ID nav further contains a list tag <ul> that further contains its own tag <li>. All the features are inherited downwards. This first definition is self-explanatory. The real fun begins when we define the <li> tag. Here too, all the definitions are fairly simple. The only definition that may need explanation is list-style-type: none, which means that while displaying the list, there is no need to display any kind of buller before that.

Then we come to the <a> tag definition. The crucial part here is:

== Code begins ==

display: block;
padding-left: 10px;
padding-right: 10px;

== Code ends ==

Again, the padding setting inserts space left and right, and display: block fills the entire bullet space upon the rollover. Without setting the display as "block" only the background behind the text is changed, as you can see it here, and not the complete block.

Note: you can read a more interactive version of this article here.

About the Author

Amrit Hallan is a freelance copywriter, and a website content writer. He also dabbles with PHP and HTML. For more tips and tricks in PHP, JavaScripting, XML, CSS designing and HTML, visit his blog at http://www.aboutwebdesigning.com.