JavaScript jQuery: mouseover auf div soll Hintergrund von anderem div ändern

[Mr. Snoot]

Hio,

ich habe mehrere div.boxb, in denen sich andere Elemente (divs, listen, ...) befinden. Wenn man nun mit der Maus eines der div.boxb berührt, soll im zugehörigen div.titelb der Hintergrund verändert werden.

• umgebende divs: .boxb
• innere divs: .titelb

Bis dato schaff ich es aber nur, dass der Hintergrund getauscht wird, wenn man das div.titelb selbst berührt, oder aber, dass alle .titelb geändert werden, wenn man irgendein .boxb berührt.

Ich denke mal, dass man da nicht viel am Code ändern muss; für die Hintergrundänderung habe ich dieses Script (Original von hier):

<script type="text/javascript">
  $(function(){
    $('.titelb')
      .css( {backgroundPosition: "0 0"} )
      .mouseover(function(){
        $(this).stop().animate({backgroundPosition:"(-340px 0)"}, {duration:400})
      })
      .mouseout(function(){
        $(this).stop().animate({backgroundPosition:"(-640px 0)"}, {duration:200, complete:function(){
          $(this).css({backgroundPosition: "0 0"})
        }})
      })
  });
</script>

Die div-Suppe:

<div id="boxen">
  <div id="gr" class="boxb">
    <div class="titelb"><a href="#"></a></div>
  </div>

  <div id="fu" class="boxb">
    <div class="titelb"><a href="#"></a></div>
  </div>

...

</div>

JS-Könner bitte vortreten

 

[IceMatrix]

Dass alle .titelb geändert werden ist klar wenn du es so machst wie hier. Du brauchst dann eher sowas hier, damit klar ist welches .titleb Element gemeint ist:

  $(function(){ 
    $('.boxb') 
      .css( {backgroundPosition: "0 0"} ) 
      .mouseover(function(){ 
        [COLOR="Red"]$('.titleb', this)[/COLOR].stop().animate({backgroundPosition:"(-340px 0)"}, {duration:400}) 
      }) ...
  });

 

[Mr. Snoot]

Das klappt leider nicht, da ich in einem anderen div noch ein HG-Bild habe das davon auch beeinflusst wird; da hatte ich nicht dran gedacht.

Hier mal die Seite.



P.S. wieso sagt mir Firebug eigentlich $ is not defined wenn ich das Script in eine separate Datei auslagere? jQuery ist doch im Hauptdokument eingebunden. Da muss man doch sonst nichts "einstellen"

 

[marcOcram]

Einfach hinzufügen und erweitern, einsetzen wie du möchtest

    <script type="text/javascript">
	$(function(){
		var oldColor = $(this).find(".titelb").css( "background" );
		$("div.boxb").mouseover(function(){
			$(this).find(".titelb").css( "background", "#FF00FF" );
		});
		$("div.boxb").mouseout(function(){
			$(this).find(".titelb").css( "background", oldColor );
		});
	});
    </script>

Hoffe ich konnte helfen

Lade deine Auslagerungsdatei als aller letztes auf der Seite

 

[Mr. Snoot]

Perfekt, ich danke dir

edit: wieso denn als letztes? Bei anderen Scripts ging das doch auch problemlos im Header

Achso, nach jQuery - alles klar, danke.

 

[marcOcram]

Wenn du einem bestimmten Div, in diesem Fall .boxb, eine Funktion anhängen willst, muss das Script erst geladen, wenn das Div schon existiert. Wenn du es in den Header packst, dann existiert das Div mit der Klasse .boxb noch gar nicht, also kann auch keine Funktion angehängt werden. Warum das nur so ist, wenn das Script in einer externen Datei liegt, kann ich dir nicht sagen.

 

[Mr. Snoot]

Ne, im Header funktioniert es schon. Aber die JS-Datei muss nach der jquery.js geladen werden - das war der Fehler.