Is There A Way To Detect If I'm Hovering Over Text?

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 ove

Solution 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.

Solution 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
(functionfindTextNodes(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.

Solution 3:

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

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