Question

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

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

例如，如果用户将鼠标悬停在＆＃34;示例＆＃34;从这一段开始，我希望能够发现他们将鼠标移到＆＃34;示例＆＃34;，而不仅仅是他们将鼠标置于段落元素之上。

编辑：我认为我在需要的时候太模糊了。基本上我试图实现的是动态文本的弹出字典。当用户将鼠标悬停在一个单词上时，它可能是复合词的一部分，所以我不仅要在单词中而且还要在段落中放置它，以便我可以检查它是否是复合词。听起来我应该在每个单词/复合词周围预处理HTML。

Answer 1

我认为还有另一种方式，你需要在不同的html标签中包装所有单词，例如＆＃34; span＆＃34;。您可以使用以下代码执行此操作：

// 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',''); }
);

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

JavaScript获取被鼠标悬停的文本

2 个答案: