Collective Web Design

Change hyper link text rollovers

CSS Styles are a simple and fast way of making your site look good. In this tutorial you will learn how to make cool text rollovers.

In this tutorial we will be working with the a:hover style! The steps to follow are given below:

If you want the links effect to change throught the site then use option 1
If you only want to have the links to change in a particular place then use option 2

Option 1. Hyper Text Rollover Effect throughout the site

Copy this code into your CSS Styles yourstyle.css file
1
2
3
4
5
6

/* mouse over link */
a:hover { 
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10pt;
 color: #990000
}

Option 2. Hyper Text Rollover Effect in a particular place of your site

Copy this code into your CSS page “yourstyle.css” file
1
2
3
4
5
6

/* mouse over all links in class .links */
.links a:hover { 
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10pt;
   color: #990000
}

Example of Option 2

Copy code in the body of your page
1
2
3

<p class="links">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a leo in quam placerat egestas vitae sed felis. Donec ultrices justo id velit pulvinar blandit. <a href="link.html">Your Link.</a>
<p>

Comments

  1. this post is very useful for me, thanks


    John John
    September 21st, 2009

  2. Great Article


    John John
    September 21st, 2009

  3. Thank you for posting this great tutorial. The instruction is easy to follow. Thanks for sharing.


    Susan
    September 22nd, 2009

Leave a Reply