✔ mouseout wird innerhalb des Elements ausgeführt

[Caltoriz]

Hallo,

ich versuche mit Hilfe von mouseover() und mouseout() 2 Buttons innerhalb eines <td>-Elements ein- bzw. auszublenden, das klappt auch wunderbar, jedoch wird das mouseout()-Event auch ausgeführt wenn ich von dem jeweiligen <td>-Element mit der Maus auf die Bilder gehe.

Woran liegt das, die Bilder sind doch schließlich innerhalb des richtigen <td>-Elements.

Hier die Codezeilen (benutze jQuery):

$("td img").fadeTo(0,0);
	
	$("td").mouseover(function() {
		if($(this).index() == 1 || $(this).index() == 3) { 
			$(this).addClass('fokus').prev().addClass('fokus');
			$("img", this).fadeTo(800,1.0);
		} else {
			$(this).addClass('fokus').next().addClass('fokus');
		}
	}).mouseout(function() {
		if($(this).index() == 1 || $(this).index() == 3) {
			$(this).removeClass('fokus').prev().removeClass('fokus');
			$("img", this).fadeTo(0,0);
		} else {
			$(this).removeClass('fokus').next().removeClass('fokus');
		}
	});

danke schonmal für die Hilfe

 

[SpiceLab]

jedoch wird das mouseout()-Event auch ausgeführt wenn ich von dem jeweiligen <td>-Element mit der Maus auf die Bilder gehe.

Woran liegt das, die Bilder sind doch schließlich innerhalb des richtigen <td>-Elements.

Ohne deinen dazugehörigen HTML-Code gesehen zu haben, lässt sich hier anhand deines Scripts zu den möglichen Fehlerquellen nichts sagen.

 

[Caltoriz]

Danke für die schnelle Antwort, hier der Quellcode, aber der ist eigtl. sehr ersichtlich

<td><img src="img/check.png" /><img src="img/add.png" /></td>

 

[Quaese]

Hi,

du musst prüfen, ob das nächste Element (Event.relatedTarget) in der Zelle enthalten ist (contains) ODER ob es sich um das Element selbst handelt. In beiden Fällen darf der Event nicht mehr ausgeführt werden und die Routine muss verlassen werden (return).

$(objElem).mouseover(function(evt){
  if($.contains(this, evt.relatedTarget) || (this == evt.relatedTarget))
    return;
  // ToDo: Sonstige Anweisungen
}).mouseout(function(evt){
  if($.contains(this, evt.relatedTarget) || (this == evt.relatedTarget))
    return;
  // ToDo: Sonstige Anweisungen
});

Ciao
Quaese

 

[Caltoriz]

Vielen Dank, macht Sinn

 

[scrippi]

dafür gibt es bei jQuery eine verbesserte Funktion namens mouseenter und die dazu passende mouseleave.
Einfach mouseover mit mouseenter und mouseout mit mouseleave ersetzen und das Problem hat sich