CSS: Image Hover Information

Introduction

Author: Martin Warning
Year: 2007
License: Free

This code shows how the footer design of this site can be achieved. The footer can contain important information, but can take up a lot of space. It also interferes with a clean design. So in this case the area uses light colors until the user moves the mouse over the area.

The key to this is the CSS property event. You can use the hover to create different formats for the hover event for links, but hover also works on other XHTML elements. In this case will be using it on a <div>. The second part is using a <div> hover event to change containing elements.

Code

Languages: The following code is an example of the footer hover, the XHTML part: 
<div id="footer" align="center">
	<b>Martin Warning 2006 - 2012</b><br /><br />
	Sections: <a href="page.html" class="footerlink">Page</a>
</div>
And the CSS part: 
#footer{background-color:#fafafa;padding:5px;color:#cccccc;}
#footer:hover{background-color:#f1f1f1;padding:5px;color:#006;}
a.footerlink{color:#ccc;}
a.footerlink:hover{color:#f00;}
#footer:hover a.footerlink{color:#006;}
#footer:hover a.footerlink:hover{color:#f00;}

In this example the footer <div> is the container of all text in the footer area and we use it's hover property to modify all containing elements. In this case we change the area background to a darker color and also modify the text color. The only problem that happens is that the a.copylink:hover property doesn't work as the #footer:hover takes preference. This why #footer:hover a.copylink:hover{color:#ff0000;} is included so now the link hover event will show the links in a red color.

Example: See it in action

Printed from: http://flyinglowlander.com/ (5/20/2012)
© FlyingLowander.com 2006 - 2012

Visit http://flyinglowlander.com for more XHTML, CSS, ASP and JavaScript examples, templates and tutorials.