[jayzee]

Hej,

jag har ett problem jag kan lösa på ett sätt men tycker att lösningen i fråga är kanske för invecklad. Hoppas att någon av Er har stött på liknande problem och har en bättre lösning.

Syfte:
Skapa en kopia av en fördefinerade div:en imgIcon och lägga in denna kopia inuti en annan div med klassen "myImg" när man hovrar över denna.

Problemet:
När man kommer med musen över den innehållet som tillhör imgIcon inuti myImg tas imgIcon bort, så fort den är borttagen triggas hover eventet igen som i sin tur skapar en ny kopia som då direkt tas bort (eftersom musen ligger över den) och plötsligt har vi hamnar i en loop som orsakar flimmer.

Lösning: Min lösning är att titta på imgIcon position samt storlek och jämföra dessa med vart musen befinner sig. Dock tycker jag denna lösning är lite "over kill" och det borde finnas någon enklare metod, såsom att veta vilket element man hamnat på vid mouseleave?

$('.myImg').hover(function() {
  $('#imgIcon').clone().appendTo($(this).parent()).show();
}, function() {
  $(this).siblings('#imgIcon').remove();
});