You can use document.elementFromPoint
. Obviously this doesn't work if the textarea
is in front of the underlying highlighting container, but there's an app for that. You just need to temporarily hide the textarea
before calling document.elementFromPoint
and then show it directly afterwards.
var textarea = $("#linksTextarea");
textarea.on("mousemove", function(e) {
// Temporarily hide the textarea
textarea.hide();
// Get element under the cursor
var elm = $(document.elementFromPoint(e.pageX, e.pageY));
// Show the textarea again
textarea.show();
if (elm.hasClass("highlighted")) {
console.log("You're mouse is over highlighted text");
}
});
Since the DOM is updated in real-time while the rendering of it is delayed until after all of your JavaScript has been executed, you don't have to worry about any visual glitching.