Witam serdecznie

Mam pewien problem z hover i this i nie wiem za bardzo jak sobie z tym poradzić ... Mam przykładowo dwa divy A i B. Chciałbym aby po najechaniu na diva A chował się on i pojawił się div B. Gdy opuszczę diva B chciałbym aby pojawił się znów div A. Mój przykład :

[HTML] pobierz, plaintext 
<div id="content">
 <div class="A">
jakieś bloki w środku tego diva
</div>
<div class="B">
inne bloki w środku tego diva
</div>
 
</div>
 
 
[HTML] pobierz, plaintext 

a to kod js:

[XML] pobierz, plaintext 
 
$('#content').hover(
 
	 function(){ 
		$('.A').hide(); 
		$('.B').show();
          },  
          function(){ 
 
		$('.B').hide();
		$('.A').show(); 
          }
);
 
[XML] pobierz, plaintext 

i to mi działa ale tylko na pierwszym div. Mam kilka A i B w content i nie wiem jak zastosować this żeby odnieść się do konkretnego A i B.

Proszę o jakąś pomoc jak mam to rozwiązać bo już siedzę kilka godzin nad tym i próbowałem wielu sposobów ale brak efektów :-(

Jak odnoszę się tylko do A np:

[XML] pobierz, plaintext 
  $(".A").hover(function(){
        $(this).css("background-color", "green");
        }, function(){
        $(this).css("background-color", "blue");
    });
 
[XML] pobierz, plaintext 

to mi to działa ale jak zrobić zeby w powyższym przykładzie ukrył się A i pojawił B?


Z góry dziękuję za podpowiedzi

Pozdrawiam

Coś takiego
https://jsfiddle.net/Ls3b63ss/2/
$(this) odnosi się do elementu na którym wykonujesz zdarzenie musisz znaleźć najbliższe b i je ukryć

Jeśli div.A oraz div.B wypełniają dokładnie tą samą przestrzeń w div#content (jeden pod/nad drugim), to wystarczy css:

wielkie dzięki Panowie oba przykłady działaja

pozdrawiam i dziękuję jeszcze raz