Edit in JSFiddle

Result
JavaScript
HTML
CSS

$(document).ready(function () {
        $("#myDiv").hover(function () {
            $(this).removeClass("class1").addClass("class2");
        }, function () {
            $(this).removeClass("class2").addClass("class1");
        });
    });

<html>
        <head>
        <title>removeClass</title>
        </head>
        <body>
        <span id="myDiv" class="class1">
        Hover Me
        </span>
        </body>
        </html>

.class1
        {
        background-color:Red;
        margin-left:100px;
        width:200px;
        height:200px;
        display:block;
        }
        .class2
        {
        background-color:Green;
        margin-left:100px;
        width:200px;
        height:200px;
        display:block;
        }