Hallo zusammen,

ich versuche gerade mehrere divs innerhalb eines mainDivs über ein img das sich ebensfalls in diesen mainDivs befindet anzusprechen. Natürlich könnte ich das jetzt mit eindeutigen id's oder klassen versehen und dann mich mit show/hide etc. ansprechen ... aber:

Ich wollte es etwas flexibler gestalten.

der aufbau:

<div class="main"> <img src="irgendwas.bla">
<div class="tooltip">1. bla</div>
<div class="tooltip">2. blabla</div>
<div class="tooltip">3. blablabla</div>
</div>

<div class="main"> <img src="irgendwie.bla">
<div class="tooltip">1. ble</div>
<div class="tooltip">2. bleble</div>
<div class="tooltip">3. blebleble</div>
</div>

<div class="main"> <img src="irgendwo.bla">
<div class="tooltip">1. bli</div>
<div class="tooltip">2. blibli</div>
<div class="tooltip">3. bliblibli</div>
</div>

was ich versuche zu erreichen ist:
dass wenn ich über ein Bild mit der Maus fahre die Tooptip-divs eingeblendet werden (egal wieviele) und dann wieder rückgängig (ausbleden onmouseout).

soweit bin ich bisher gekommen:

1. wenn ich über ein Bild fahre, dann erhält es die klasse "active"
2. dieses wird dann mit einer animation versehen (unwichtig)
3. nun der nichtfunktionierende part: Ich frage ab, ob das Bild kinder hat. Wenn ja, dann show();. Aber es klappt nicht -.-

hier der code:

$( document ).ready(function() {

 $('.main img').mouseover(function() {
  
  // Set Active
  $(this).addClass('active');
  
  // Object ZoomIn
  $(this).animate({
   height:"309",
   marginTop:"0"
   }, 50);
  
  // Show Info
  if ($(this).children().length > 0) {
   $(this).show();
  };
  
    });
 
 $('.main img').mouseout(function() {
  
  // Object ZoomOut
  $(this).animate({
   height:"259",
   marginTop:"50"
   }, 50);
   
  // Hide Info
  $(this).removeClass('active');
  
    });

});

Fazit:
Warum werden die tooltips nicht angezeigt? Irgend wer nen tip?

MFG GioCece