We Value Your Privacy

We and our partners use technology such as cookies on our site to personalise content and ads, provide social media features, and analyse our traffic. Click below to consent to the use of this technology across the web. You can change your mind and change your consent choices at anytime by returning to this site.

Update Consent
Loading ...

How to Create a Mouseover in KompoZer

Updated February 21, 2017

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.

Loading ...
  1. Open the page to be modified in KompoZer.

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

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

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

  5. Click the "Create Style rule" box.

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

  7. 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.

  8. 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.

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

  10. 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.

Loading ...

About the Author

Finn McCuhil is a freelance writer based in Northern Michigan. He worked as a reporter and columnist in South Florida before becoming fascinated with computers. After studying programming at University of South Florida, he spent more than 20 years heading up IT departments at three tier-one automotive suppliers. He now builds wooden boats in the north woods.

Loading ...