Javascript-форум - Как добавить и удалить класс при нажатии на div?

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Как добавить и удалить класс при нажатии на div? (https://javascript.ru/forum/events/54186-kak-dobavit-i-udalit-klass-pri-nazhatii-na-div.html)

<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>

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

apocalipsis_now,
смотрите пост 20 -- click замените на mouseover

рони,
Ок, спасибо. А есть возможность реализовать это без fade in fade out, чтобы картинки плавно менялись?

apocalipsis_now,
добавить пару картинок и изучить css,
на данный момент плавно умеет только Google Chrome с
background-image работать.

Пример: for Chrome

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .main {   height: 200px;
   width: 200px;
 background-image: url(http://www.vseprokosmos.ru/ris/jevodan.jpg);
 background-repeat: no-repeat;
 background-position: left top;
 background-size: cover;

 }

 .div_1 {  transition: all 2s ease-in-out;
 background-image: url(http://i78.photobucket.com/albums/j81/MariaContria_2006/floorrtr444kf6.jpg);
 background-repeat: no-repeat;
 background-position: left top;
 background-size: cover;
 }

 .div_2 {   transition: all 2s ease-in-out;
 background-image: url(http://club.foto.ru/gallery/images/photo/2004/06/09/218029.jpg);
 background-repeat: no-repeat;
 background-position: left top;
 background-size: cover;
 }
 #div_1, #div_2{
    height: 100px;
    border: #CC0000 2px solid
 }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function()
     {
       $("#div_1").mouseover(function()
         {

               $("#foto").addClass("div_1").removeClass("div_2")

         }
       );
       $("#div_2").mouseover(function()
         {

               $("#foto").addClass("div_2").removeClass("div_1")

           }
       );
     }
   );
  </script>
</head>

<body>
<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>


</body>

</html>