Technote 10004 - Changing link hover settings

Many web sites, including Olson Software's, change link properties, such as underline when you hover over them. For example, in this page, an underline is displayed on the link as you move over it. This is very simple to do in your own projects.

Creating the Style Sheet

If you do not already have a style sheet in your project, see TechNote 10001 for details on how to create one.

Opening the Style Sheet

In order to setup your default font and font size you must edit the style sheet you have applied to your topics.  See Technote 10003 for details on how to open your style sheet.

Creating a style

We are now going to create a style which will apply to all links. The way we do this is by creating a style which will customize the link tag (a)

1. In the CSS editor select the Insert|Style menu command.
2. In the dialog, expand the tag list.
   
3. Select the a tag.
   
4. Since we only want to change the link when a user is hovering over it, from the Pseudo Details, select hover. This is a special property that applies only to links
   
5. Click OK.

Setting Style Properties

Now that we have setup our style, we can now setup the properties (i.e: removing the underline) to be associated with our style.

9. Click the button on the toolbar or click with the secondary mouse button on the style and click Properties.
10. Select Style from the list of available properties, if it is not already selected.
    
11. Change any properties you wish to be different when the mouse cursor hovers over your link. For example, to add an underline:
    From the list of available attributes, scroll down until you find text-decoration. Click on it and then click the drop down button beside it to select underline.
    
12. Save our style sheet by using the File|Save menu command.
13. We have now created our style!  If you re-open any pages using this style sheet you will find that your links will have changed! To see the change, you'll need to go to the tab, or build your project.