How to Create a Mouseover in KompoZer

Comstock/Comstock/Getty Images

KompoZer is a free open-source Web development tool featuring a what-you-see-is-what-you-get, or WYSIWYG, editor and support for cascading style sheets, or CSS. Its flexibility make it a popular choice for both aspiring and established Web developers.

Flexibility and power don't come without a certain level of complexity, though -- in order to maintain compatibility with HTML standards, not every coding function is available by clicking an icon and applying preset properties to a page item. The hover, or "mouseover," page function that changes the colour of a link when the mouse cursor is placed over requires some extra work to apply properly.

Open the page to be modified in KompoZer.

Click "Tools" on the main menu bar at the top of the KompoZer window. Click "CSS Editor" in the drop-down menu.

Click the button immediately to the left of "custom style rule" in the "Create a new:" section of the "CSS Stylesheets" window.

Enter the text "a:hover", without the quotation marks, in the text box below the custom style rule.

Click the "Create Style rule" box.

Click the "Text" tab located on the upper right side of the window.

Click the blank rectangle immediately to the right of the text entry box labelled "Color:" to open a colour selector window that allows you to pick a predefined colour or choose a custom shade.

Select a colour. Click the "OK" button to close the colour selection window. The name of a standard colour appears in the text entry box for colour; custom colours are designated by their hex value.

Click the "OK" button at the bottom of the "CSS Stylesheets" window to save the changes and return to the editing window.

Create the link text as you normally would in KompoZer by highlighting the text, clicking the link icon and entering the link address in the pop-up properties window. The link changes to the specified colour when you place the mouse cursor over the text.