Is there a way to detect if I'm hovering over text?

Question

What I'm really after is to detect when the cursor changes to type "text", that is, when I'm hover over a piece of text. I have tried looking at the element types I am hovering over, but this isn't too accurate because I don't know what they actually contain.

I understand that detecting the CSS cursor attribute is only possible if it has previously been assigned by me.

Is this possible at all? How would you go about doing this?

EDIT: I do not want to check If I am currently over a specific element, I want to know if I am hover over any text within that element. A div could be 100% width of the browser, but with a shorter piece of text at the far left. I don't want to detect when hovering over just any part of an element.

Answer 1

No need to try to detect if the cursor changed.

You can simply detect if the mouse is hovering your text by using this kind of construct :

document.getElementById('myTextId').onmouseover = function() {
    // do something like for example change the class of a div to change its color :
    document.getElementById('myDivId').className = 'otherColor';
};

If you don't have an id but a class or a tag, you can replace getElementById by getElementsByClassName or getElementByTagName (which will return arrays on which you'll iterate).

If you want to restore the color when leaving the element, I suggest you bind the event onmouseout in the same way.

For example, if you want to do something on any paragraph, you may do that :

var paras = document.getElementByClassName('p');
for (var i=0; i<paras.length; i++) {
    paras[i].onmouseover = function() {
        // do something like for example change the class of a div to change its color :
        document.getElementById('myDivId').className = 'otherColor';
    };
}

I you plan to do a lot of things like this, I suggest you look at jquery and its tutorial.

Answer 2

One possible way is to find all the text nodes in your DOM and wrap them in a span with a certain class. Then you could select that class and do whatever you want with it:

// Wrap all text nodes in span tags with the class textNode
(function findTextNodes(current, callback) {
    for(var i = current.childNodes.length; i--;){
        var child = current.childNodes[i];
        if(3 === child.nodeType)
            callback(child);
        findTextNodes(child, callback);
    }
})(document.body, function(textNode){ // This callback musn't change the number of child nodes that the parent has. This one is safe:
    $(textNode).replaceWith('<span class="textNode">' + textNode.nodeValue + '</span>');
});

// Do something on hover on those span tags
$('.textNode').hover(function(){
    // Do whatever you want here
    $(this).css('color', '#F00'); 
},function(){
    // And here
    $(this).css('color', '#000');
});

JSFiddle Demo

Obviously this will fill your DOM with a lot of span tags, and you only want to do this once on page load, because if you run it again it will double the number of spans. This could also do weird things if you have custom css applied to spans already.

Answer 3

This answer to another question gives a function to get a node from a point. Using this, you can just check if the mouse is over a text node's bounding boxes.

function isPointOverText(x, y) {
    const element = document.elementFromPoint(x, y);
    if (element == null) return false;
    const nodes = element.childNodes;
    for (let i = 0, node; (node = nodes[i++]); ) {
        if (node.nodeType === 3) {
            const range = document.createRange();
            range.selectNode(node);
            const rects = range.getClientRects();
            for (let j = 0, rect; (rect = rects[j++]); ) {
                if (
                    x > rect.left &&
                    x < rect.right &&
                    y > rect.top &&
                    y < rect.bottom
                ) {
                    if (node.nodeType === Node.TEXT_NODE) return true;
                }
            }
        }
    }
    return false;
}

window.addEventListener("mousemove", (e) => {
    console.log(isPointOverText(e.clientX, e.clientY))
})

Answer 4

If you're using jQuery (which you should, because jQuery is awesome), do this:

$("#myDiv").mouseover(function() {
    $("#myDiv").css("background-color", "#FF0000");
});