Hallo liebes Forum,
ich habe da ein kleines Problem. Ich möchte einen einfachen Hovereffekt auslösen, wenn ich mit der Maus über ein Bild gehe. Beim rübergehen mit der Maus, sollte das Bild ausgeblendet werden (hide) und beim verlassen wieder eingeblendet (show).

Das Funktioniert auch soweit wunderbar, nur wenn ich die Maus bewege, dann flakert das Bild immer zwischen hide und show umher. Es soll aber die gesamte Fläche benutzt werden. So das wenn der "Bereich" verlassen wird das Bild wieder eingeblendet wird. Und nicht bei kleinsten Mausbewegungen.

Hier ist mein bisheriger Code (Das Bild(Die Bilder) befindet sich in einem Listenpunkt:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$('.tr ul li p img').each(function(i)         {             var tID = $(this).attr('alt');                         $(this).hover(function()             {                 $(this).hide();             },             function()             {                 $(this).show();             });                 });

Kann mir vielleicht jemand helfen? Ich erkenne den Fehler nicht.
Vielen Dank

gruß

Der gleiche Fehler tritt auf, wenn ich mit parent eine Ebene höher gehe bis zum Listenpunkt. Er wechselt einfach immer zwischen over und out hin und her.

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$('.tr ul li p img').each(function(i)         {             var tID = $(this).attr('alt');                         $(this).parent().parent().css('cursor','pointer').hover(function()             {                 $(this).find('img').hide();             },             function()             {                 $(this).find('img').show();             });                 });

Wenn das Element versteckt wird, verschwindet es auch unter der Maus -> mouseleave. Durch mouseleave wird es wieder unter der Maus eingeblendet -> mouseenter.

Anstatt hide/show zu benutzen, welche die display Eigenschaft setzen, benutze einfach die opacity Eigenschaft.

Das "each" kannst du dir auch sparen.

http://jsfiddle.net/zxz6f/2/