To change the background color and font color of a div on mouse hover, use this CSS code.
<style type=”text/css” >
<div class=” title_div”>
On mouse over div becomes green and text turns black.
- Go to the Apply/Manage Styles task pane and choose ‘New Style’. In the New Style dialog box, enter the Selector as .title_div and set the background color to black and font color to white.
- Click OK to save. Then position your cursor into the div and right click on the style in the Apply Styles task pane and select Apply Style from the menu or simply double click on the style, to apply it to the div.
- Now create another style called .title_div:hover (a pseudo-class to catch the event hover/mouseover) and set the background color to green and font color to black.
- Save your document and preview in the browser.
Filed Under: Expression Web
About the Author: Minal is a freelance web and graphics designer. She specializes in designing Logos, Stationery, Graphics and Icons as well as website templates using graphical tools like Photoshop, Illustrator and Expression Web. Twitter @saffronstroke