<html>
<head>
<title>CSS Toggle Javascript Example</title>
</head>
<body>

<style>
.class1 {
    background-color: red;
    color: white;
    width: 100px; height: 100px; border: 1px solid black; text-align: center;
}
.class2 {
    background-color: white;
    color: red;
    width: 100px; height: 100px; border: 1px solid black; text-align: center;
}
</style>

<script language="JavaScript">
function over(obj) {
    obj.className = "class2";
}
function out(obj) {
    obj.className = "class1";
}
</script>

<div class="class1" onMouseOver="over(this);" onMouseOut="out(this);">
Box 1
</div>

<div class="class1" onMouseOver="over(this);" onMouseOut="out(this);">
Box 2
</div>

</body>
</html>