Obwohl das Folgende die Frage möglicherweise nicht wirklich beantwortet, da dies das erste Ergebnis des Googelns ist (der Googler stellt möglicherweise nicht genau die gleiche Frage :), hoffe ich, dass es zusätzliche Informationen liefert.
Es gibt zwei verschiedene Ansätze, um eine Liste aller Elemente zu erhalten, über die sich die Maus gerade befindet (für neuere Browser möglicherweise):
Der "strukturelle" Ansatz - Aufsteigender DOM-Baum
Wie in Dhermans Antwort kann man anrufen
var elements = document.querySelectorAll(':hover');
Dies setzt jedoch voraus, dass nur Kinder ihre Vorfahren überlagern, was normalerweise der Fall ist, aber im Allgemeinen nicht zutrifft, insbesondere wenn es sich um SVG handelt, bei dem sich Elemente in verschiedenen Zweigen des DOM-Baums möglicherweise überlappen.
Der "visuelle" Ansatz - Basierend auf "visuellen" Überlappungen
Diese Methode verwendet document.elementFromPoint(x, y)
, um das oberste Element zu finden, es vorübergehend auszublenden (da wir es sofort im selben Kontext wiederherstellen, wird es vom Browser nicht wirklich gerendert) und dann das zweitoberste Element zu finden ... Sieht ein wenig hackig aus, aber Es gibt zurück, was Sie erwarten, wenn sich beispielsweise Geschwisterelemente in einem Baum befinden, die sich gegenseitig verschließen. Bitte finden Sie diesen Beitrag für weitere Details,
function allElementsFromPoint(x, y) {
var element, elements = [];
var old_visibility = [];
while (true) {
element = document.elementFromPoint(x, y);
if (!element || element === document.documentElement) {
break;
}
elements.push(element);
old_visibility.push(element.style.visibility);
element.style.visibility = 'hidden'; // Temporarily hide the element (without changing the layout)
}
for (var k = 0; k < elements.length; k++) {
elements[k].style.visibility = old_visibility[k];
}
elements.reverse();
return elements;
}
Probieren Sie beide aus und überprüfen Sie die unterschiedlichen Renditen.