JavaScript获取鼠标悬停的文本[重复]

Posted 2023-03-04

【中文标题】JavaScript获取鼠标悬停的文本[重复]

【英文标题】：JavaScript get text that was moused over [duplicate]

【发布时间】：2017-08-30 09:51:59

【问题描述】：

我找不到检测用户鼠标悬停的文本的方法。 onmouseover 事件似乎不支持此功能。有没有办法做到这一点？

https://www.w3schools.com/jsref/event_onmouseover.asp

例如，如果用户将鼠标悬停在此段落中的“示例”上，我希望能够检测到他们将鼠标悬停在“示例”上，而不仅仅是他们将鼠标悬停在段落元素上。

编辑：我认为我对自己需要的东西太模棱两可了。基本上我要实现的是动态文本的弹出字典。当用户将鼠标悬停在一个单词上时，它可能是复合词的一部分，所以我不仅想要这个词，而且想要它在段落中的位置，这样我就可以检查它是否是一个复合词。听起来我应该在每个单词/复合词周围使用 span 对 html 进行预处理。

【问题讨论】：

可能在这个问题中得到了回答。似乎跨度中的每个单词都是最好的方法：***.com/questions/7563169/…

【参考方案1】：

我认为没有另一种方法，您需要将所有单词包装在不同的 html 标记中，例如“span”。你可以用下面的代码做到这一点：

// wrap words in spans
$('p').each(function() 
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
);

// bind to each span
$('p span').hover(
    function()  $('#word').text($(this).css('background-color','#ffff66').text()); ,
    function()  $('#word').text(''); $(this).css('background-color',''); 
);

【参考方案2】：

你只需像这个例子一样将它包裹在 span 中：

<p>
Words Words Words Words Words <span onmouseover="alert('Mousing over A nice word!');">A Nice Word</span> Words Words Words Words 
</p>

https://jsfiddle.net/a4q6gqs2/

【讨论】：

这可行，但它有点麻烦，因为我想将它与动态数据一起使用，并且我必须为每个单词添加一个事件侦听器。我希望有一种方法可以在不这样做的情况下做到这一点，而且它更复杂，因为我想了解有关其所在上下文的信息，所以对于我的示例，我想知道用户正在悬停在段落中的“示例”之上，我还想知道它所在的段落及其在该段落中的位置。

给我们你做动态数据的代码（或其中的一部分）也许还有其他方法