[apocalipsis_now]

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<style>

.pages {
	font-family: "Minion Pro";
	color: #FFF;
	font-size: 20px;
	letter-spacing: 2px;
	font-weight: bold;
	}

.main {
background-image: url(http://slideprojector.ru/index_2.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}

.div_1 {
background-image: url(http://slideprojector.ru/bisnes.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}

.div2 {
background-image: url(http://slideprojector.ru/index_2.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}
  
</style>

<script>
$(document).ready(function(){
    $("#div_1").mouseover(function(){
        $("#foto").fadeOut(500).addClass("div_1", 500).fadeIn(500);
    });
    $("#div_2").mouseover(function(){
        $("#foto").fadeOut(500).addClass("div_2", 500).fadeIn(500);
    });
});
</script>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" class="main" id="foto">
<tr>
<td>
<div id="div_1" class="pages">БИЗНЕС</div>
<div id="div_2" class="pages">ДЕТИ</div>
</td>
</tr>
</table>

Вроде все правильно оформил, чтобы было наглядно видно что происходит. При загрузке страницы фот под дивами правильный. При наведении мыши на надпись "бизнес", фон меняется, а при наведении на надпись "дети" - нет.