Ich habe einen Behälter mit Fliesen (Gras, Wasser usw.) und in einigen von ihnen habe ich Gegenstände (Randsprites, Bäume und allgemeine Gegenstände). Aufgrund der Natur der Sprites sind alle Elemente 64x64, während Kacheln nur 32x32 sind.
Mein Problem ist, dass ich ein Hover-Ereignis auf Kacheln auslösen möchte, aber manchmal werden sie von den Elementen anderer Kacheln beschattet.
Das Bild unten zeigt das Problem. Der dicke grüne Bereich ist die Kachel, die wirklich schwebt, wenn ich die Baumkachel schweben lassen möchte.
das Problem http://upload.cip.nu/pfile.php?file_id=2327
Das CSS:
%Vor%Das HTML, vereinfacht:
%Vor%Hier ist die Live-Demo Ссылка
Ich weiß nicht einmal, wie ich die Frage formulieren soll, aber hier steht:
Ist es möglich, das Ereignis nur auf dem Elternelement (.tile) auszulösen, so dass überlaufende Kinder (.item) nicht verdecken, welche Kachel ich wirklich schwebe?
EDIT: Dank @Brilliand habe ich folgendes implementiert:
%Vor%Was Ihren Browser betrifft, ist das Schweben über etwas, das aus einer Kachel herausragt, dasselbe wie das Schweben über der Kachel, aus der es herausragt, und nicht über alles, was verdeckt wird. Um dies in Ihrer speziellen Situation zu umgehen, schlage ich vor, Ihre Hover-Funktion auf #map_canvas zu setzen und in dieser Funktion herauszufinden, auf welcher Kachel Sie sich befinden. Bei Kacheln in einem rechteckigen Raster ist dies eine einfache Arithmetik.
Damit dies funktioniert, müssen Sie natürlich ein mousemove-Ereignis einfügen (um zu erkennen, wann sich die Maus von einer Kachel zur anderen bewegt), und Sie sollten wahrscheinlich Code einfügen, um die Funktion zu verlassen, wenn der Benutzer immer noch über die Maus schwebt gleiche Kachel.
EDIT: Obwohl diese Antwort bereits akzeptiert wurde, ist hier eine Lösung basierend auf meinem Kommentar:
%Vor%Dies scheint das Problem für alle Kacheln mit Elementen auf ihnen zu beheben, obwohl es Ihre: leeren Deklarationen vermasselt. Ich erwähne das vor allem, weil es Ihrer Frage näher kommt, als Sie gefragt wurden.
Edit: Wenn es tatsächlich ein Problem mit Event-Bubbling gibt und Sie jQuery verwenden, sehen Sie sich die event.stopPropagation-Methode .
Haben Sie versucht, z-index es hinzuzufügen?