有没有办法检测我是否在文本上悬停？

我真正追求的是检测光标何时变为键入“文本”，也就是说，当我将光标悬停在一段文本上时。我试着看看我徘徊在的元素类型，但这不是太准确，因为我不知道它们实际上包含了什么。有没有办法检测我是否在文本上悬停？

据我所知，检测CSS游标属性是唯一可能的，如果它以前由我分配。

这可能吗？你会如何去做这件事？

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

来源

2012-04-30 Challe

我敢打赌，如果你解释你的用例，你会得到一个更好的答案。你可能会以错误的方式看待问题。 –

mouseover http://api.jquery.com/mouseover/ –

重复：http://stackoverflow.com/questions/3395293/check-cursor-is-over-element – mgraph

不需要尝试检测光标是否改变。

你可以简单的检测，如果鼠标是通过使用这种结构的徘徊文本：

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，但一个类或一个标签，你可以通过getElementsByClassName方法代替的getElementById或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和它的教程。

来源

2012-04-30 19:34:47

我很确定这不是问题的要求。没有使用“id”或选择器，他希望在光标位于任何“文本”上时检测。可悲的是我不认为这是可能的。 –

@JamesMontagne你说得对，如果我不够清楚，我很抱歉。 – Challe

任何文本，没有。但这并不意味着什么。所以我认为需要某些文本。这就是为什么我提到类或标签的搜索。通常你会有类似“

”的东西，你可以使用getElementsByClassName。 –

如果你正在使用jQuery（你应该，因为jQuery是真棒），这样做：

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

来源

2012-04-30 19:38:16

如果你已经记住了所有的跨浏览器兼容性代码，那么如果你使用的是JavaScript，但是对于加载速度来说不必要的糟糕，那么JQuery是可以的。 – 2017-04-23 21:51:46

一种可能的方式是找到DOM中的所有文本节点，并在跨度将它们包装与某一类。然后，你可以选择一流的，做任何你想做的事情：

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

显然，这将填补你的DOM有很多跨度标签，而您只需要在页面加载做一次，因为如果再次运行它将会使跨度数量加倍。这也可以做奇怪的事情，如果你有自定义的CSS应用跨度已经。

来源

2012-04-30 19:47:17 Paulpro

你最好有一个坚如磐石的CSS重设核武器以适应这些'span'的任何风格（至少用'！important'核弹=内联风格） – FelipeAls

基本上我在评论中提到了什么。这基本上可以工作，但可能是一个非常糟糕的主意。我真的会考虑这个功能有多重要。 –

@JamesMontagne是的...我不认可这个：P在非缩小的HTML上，这也会创建大量的空/空白填充的span标签。据我所知，这是实现它的唯一方法，因为你不能将事件添加到文本节点。 – Paulpro

有没有办法检测我是否在文本上悬停？

回答

相关问题