The class 'red' is added to the div when the mouse leaves. However because you are adding in-line CSS styling during the mouseenter function, it supersedes the CSS styling.
<style type="text/css">
#ex
{
background: red;
}
</style>
<div id="ex" style="background: yellow">
</div>
The div will show up with a yellow background. This is essentially what you are doing.
I would create a second class named 'yellow' on mouseenter add the 'yellow' class. on mouseleave remove the 'yellow' class and add the 'red' class.
<html>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style type="text/css">
.abc
{
background-color:green;
font-size:200%;
}
.red
{
background-color:red;
}
.yellow
{
background-color: yellow;
}
</style>
<body>
<p class="abc">ABC</p>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".abc").mouseenter(function(){
$(this).removeClass("red");
$(this).addClass("yellow");
});
$("p").mouseleave(function(){
$(this).removeClass("yellow");
$(this).addClass("red");
});
});
</script>
</html>