Change color on mouse hover in Microsoft Expression Web January 2, 2009
Posted by minals in Expression Web Tips and Tricks.Tags: background color, change, Expression Web, font color, hover, Microsoft, modify, mouse over, text, tips, tricks
trackback
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>
The same can be done in Microsoft Expression Web in very simple steps.
- 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.
I could not get this method to work. One issue was that the “hover” style wouldn’t show up in the “apply styles” list although I could see it in the list of styles on the page. Any ideas?
Hi Frank,
‘hover’ is a pseudo-class that adds a special style to the element. Hence in this example, .title_div:hover adds a style to the div on hover/mouseover. Once written, this style is applied to the element and hence not listed in Apply Styles task pane. Therefore point 3 does not mention of applying this style. However, for the benefit of all future readers, I have added the word psuedo-class in the article, to make it clear.
Do follow all the steps, save and preview the page. It should work fine.
If you still have any doubts, please feel free to revert. I would be glad to help you out.
Regards,
Minal
Thanks for responding, Minal
I can’t seem to get that code to work. I have a menu image with hotspots to link to pages. I want to make the menu items yellow on hover since they are not underlined and may not appear to be links to the casual eye.
If you have time, could you look at the source on the test page referenced below? Maybe you can see why the hover code isn’t working.
Thanks,
Frank
Hi Frank,
The link to the test page is missing in your comment.
Anyway, with what I have understood from your comment, you have your text on the menu image and want to highlight the text/the hotspot on hover. This could be achieved but not with the code given in this article. To do that, you will have to create different set of images and replace them on mouse over. I will have to research a bit on this one, but I will soon post it as another article on saffronstroke.
Regards,
Minal