Color change onhover?

How do you make a simple square that when you hover (or mouseover) the whole thing changes color?

Thanks for the help!

Here it is:

<style type="text/css">
div.test
{
width: 115px;
height: 115px;
background-color: blue;
}
div.test:hover
{
background-color: red;
}
</style>
<div class="test"></div>