Siend,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
padding: 20px;
margin: 20px;
}
#A {
background: #FF3300;
}
#B {
background: #0000FF;
}
#C {
background: #006633;
}
#A.black,
#B.black,
#C.black {
background: #000000;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(function() {
$("div").on('mouseover mouseleave', function(event) {
event.stopPropagation();
$("div").removeClass('black');
$(this).toggleClass('black', event.type == 'mouseover')
})
});
</script>
</head>
<body>
<div id="A">
<div id="B">
<div id="C"></div>
</div>
</div>
</body>
</html>