javascript - 有没有办法检测我是否将鼠标悬停在文本上？

Question

我真正想要的是检测光标何时变为“文本”类型，即当我将鼠标悬停在一段文本上时。我试过查看我悬停的元素类型，但这不太准确，因为我不知道它们实际包含什么。

我知道只有在我之前分配过 CSS 光标属性时才能检测到它。

这可能吗？你会怎么做呢？

编辑：我不想检查我当前是否在特定元素上，我想知道我是否将鼠标悬停在该元素内的任何文本上。一个 div 可以是浏览器的 100% 宽度，但在最左边有一段较短的文本。我不想检测何时将鼠标悬停在元素的任何部分上。

Answer 1

无需尝试检测光标是否更改。

您可以使用这种构造简单地检测鼠标是否悬停在您的文本上：

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';
};

如果您没有 id 而是类或标签，则可以将 getElementById 替换为 getElementsByClassName 或 getElementByTagName （这将返回您将迭代的数组）。

如果你想在离开元素时恢复颜色，我建议你用同样的方式绑定事件onmouseout。

例如，如果您想在任何段落上做某事，您可以这样做：

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';
    };
}

我打算做很多这样的事情，我建议你看看 jquery 及其教程。

Answer 2

一种可能的方法是找到 DOM 中的所有文本节点，并将它们包装在具有特定类的 span 中。然后你可以选择那个类并用它做任何你想做的事情：

// 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 演示

显然，这将在您的 DOM 中填充大量 span 标签，并且您只想在页面加载时执行此操作一次，因为如果再次运行它，它将使 span 数量增加一倍。如果您已经将自定义 css 应用于 span，这也可能会做一些奇怪的事情。

Answer 3

如果您正在使用 jQuery（您应该这样做，因为 jQuery 很棒），请执行以下操作：

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