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