Есть такой скрипт на jQuery:
.main {
background-image: url(index_2.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}
.div_1 {
background-image: url(bisnes.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}
.div2 {
background-image: url(index_2.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
}
<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>
<div id="div_1" class="pages">БИЗНЕС</div>
<div id="div_2" class="pages">ДЕТИ</div>
При наведении на первый див, фон меняется, а при наведении на второй, остается новая картинка от первого. В чем может быть косяк?