Hover Background Link Effect

You may have visited some web pages and seen a special hover effect occur when you go to click on a hyperlink on the page. The link will change colors as you place your mouse pointer over it, and also a colored background will occur around the link. The colors that appear are customizable to your desires.

Below is an example link that shows this effect. In this example the link will change to a light blue color, and a darker blue background will appear around it. Move your mouse pointer over this link below to see the hover effects it produces.

Here is an example of this type of hover link.

This effect is obtained by adding what is called a Cascading Style Sheet (CSS) code to the "head" area of your webpage.

Below are the instructions to copy and paste the desired HTML code into your webpage using Windows Notepad or similar HTML webpage editor:

Select the HTML code below (by "right clicking" with your mouse cursor inside the below code box window, then choose "select all" from the options). Then right click again on the highlighted text with your mouse cursor and choose "copy" from the options.

Then, open your desired webpage in Windows Notepad.
Move mouse pointer to location you require the code to be inserted on your page (the code should be pasted into the "head" section of your page), and left click there once to leave the flashing cursor.
Then right click and choose "paste" from the options.

Note that the colors can be customized to your preferences by changing the color definition area with in the above code.

Tim Wilson,  January 2001
 

Return to Home page