Saffron Stroke - Your Web Design Resource » hover http://www.saffronstroke.com Design Blog Wed, 11 Jan 2012 06:36:24 +0000 en hourly 1 http://wordpress.org/?v=3.0 Change color on mouse hover in Microsoft Expression Web http://www.saffronstroke.com/2009/01/02/change-color-mouse-hover-ew/ http://www.saffronstroke.com/2009/01/02/change-color-mouse-hover-ew/#comments Fri, 02 Jan 2009 05:04:01 +0000 Minal http://saffronstroke.wordpress.com/?p=252


To change the background color and font color of a div on mouse hover, use this CSS code.

<style type=”text/css” >

.title_div{

                background-color:black;

                color:white;

}

.title_div:hover{

                                background-color:green;

                                color:black;

}

</style>

<body>

        <div class=” title_div”>

                        On mouse over div becomes green and text turns black.

        </div>

</body>

 

Before Hover
After Hover

The same can be done in Microsoft Expression Web in very simple steps.

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

    2.              b4

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

    4.              after

  4. Save your document and preview in the browser.
]]> http://www.saffronstroke.com/2009/01/02/change-color-mouse-hover-ew/feed/ 4