Div bei hover vergrößern - Problem mit Kindern

[DeluXe]

Abend zusammen,

folgendes Problem:

Ich habe einen Div, dieser enthält ein Image, einen leeren Link und Text.

Den Link fülle ich mit einem Container-Div.
diesem Container-Div gebe ich das Image als Background-Image und fülle diesen wiederum mit dem Text.

Der besagte Container-Div hat eine feste Höhe und Breite, zusätzlich ein Overflow hidden.
Beim onmouseover Event soll dieser Div nun so hoch werden, wie das Bild ist - im Normalfall verdoppelt sich die Höhe ungefähr.

So weit, so gut - alles kein Problem.
Schwierig wird es nur, wenn in dem Text weitere Tags vorkommen, wie z. B. <b>.
Wenn man über dieses element fährt verliert der Container-Div das onmouseover-Event und klappt wieder auf die ursprüngliche Größe zusammen, was natürlich nicht sein soll.
Erst wenn man mit der Maus von dem kompletten Div fährt, soll er wieder zusammen klappen.

Hat jemand eine Idee wie ich das beheben kann?
Umgesetzt ist das alles mit jQuery, den Code lasse ich erstmal bei Seite, da er im Moment durch ewiges rumtesten nicht gerade übersichtlich und teilweise etwas sinnfrei ist.

Auf jeden Fall schonmal vielen Dank im Voraus.

 

[Sven Mintel]

Moin,

das Problem kann ich nicht nachvollziehen, ich glaube, du müsstest mal zeigen, wie du die Events überwachst, denn dies simple Beispiel hat keine Probleme mit Kindern:

<style type="text/css">
    #layer{border:1px solid black;width:100px;}
    .in {height:300px;}
  </style>
  <div id="layer">
    DIV-Container 
    <b> mit fettem Text</b>
  </div>
  <script type="text/javascript">
  $('#layer').mouseover(function(e){$('#layer').removeClass('out');$('#layer').addClass('in');});
  $('#layer').mouseout(function(e){$('#layer').removeClass('in');$('#layer').addClass('out');});
  </script>

Falls du dort mit toggleClass() arbeiten solltest, das kannst du nicht nehmen, denn der mouseover-Event vererbt sich auf Kindelemente. Die Funktion würde dort ebenfalls aufgerufen werden, und der Klassenname entfernt.

 

[DeluXe]

Dein Beispiel trifft meine (gestrige) Variante schon ziemlich genau, wobei ich keine Klassen zugewissen habe, sondern per animate() den Container in der Höhe verändert habe.
Das dürfte aber keinen Unterschied machen.

Allerdings ist mir auf jquery.com noch das zweite Beispiel ins Auge gefallen.

Dieses macht genau das, was ich brauche - die Events der Kinder werden ignoriert.
Ich habe beim ersten lesen der Doku nur den Unterschied nicht wirklich beachtet.

Warum das nun bei deinem Beispiel funktioniert, werde ich nochmal ausprobieren. Vielleicht macht es ja doch einen Unterschied, ob man die Klasse verändert oder per - z. B - animate() Dinge tut.