How to Create a Mouseover in KompoZer


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 color 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 labeled "Color:" to open a color selector window that allows you to pick a predefined color or choose a custom shade.

  • Select a color. Click the "OK" button to close the color selection window. The name of a standard color appears in the text entry box for color; custom colors 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 color when you place the mouse cursor over the text.


  • Photo Credit Comstock/Comstock/Getty Images
Promoted By Zergnet


You May Also Like

Related Searches

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!