This page looks plain and unstyled because you're using a non-standard compliant browser. To see it in its best form, please upgrade to a browser that supports web standard_personals. It's free and painless.

Build A Website Blog

Creating Rollover Effects With CSS

Skip | 13 November, 2005 16:32

Do you ever seen those fancy links where they change the appearance as soon as you place your mouse cursor on them?  Here's how to do it.....
See a simple example of a rollover effect at http://www.aboutwebdesigning.com/examples/rollover1.php.

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 at

http://www.aboutwebdesigning.com/examples/rollover2.php.

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 tag with an ID nav. This DIV tag 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 nened 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 at

http://www.aboutwebdesigning.com/examples/rollover3.php, and not the complete block.

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

HTML :: Comment (0) :: Permalink :: Trackbacks (0)

Comments for post

 
Build A Website | Javascript | HTML Help | Persuasive Copywriting | HTML Form | Simple eMail Form | Build A Website Map