鼠标突出显示单词 [英] Words highlight on mouse over

问题描述

你知道最有效的突出单词和添加onmouseover事件的方法吗？

Do you know the most efficient way to highlight word and add onmouseover event?

我有文字，我想制作一些单词解释字段，所以当用户将光标放在单词上，我将AJAX称为字典并显示其含义。

I have text and I want to make somekind of word explanation field, so when user put his cursor on the word, I call AJAX to dictionary and show him meaning.

我有两个想法：
1）在显示文本之前，请将每个单词放入到< span onmouseon =my_foo（word）;> 包装器。
例如：

I have two ideas: 1) Before showing text, put each word to <span onmouseon="my_foo("word");"> wrapper. For example:

< span onmouseon =my_foo（Hello）;> Hello< / span>

< span onmouseon =my_foo（world）;> world< / span>

但我认为这会严重超载页面。

But I think this will seriously overload the page.

2）当用户将光标持续超过0.5秒时区域，我得到指针坐标，计算显示的单词（我不知道是否可能）并进行AJAX调用。

2) When user hold cursor for more than 0.5 sec in one area, I get pointer coordinates, calcuate what word is shown (I do not know if is possible) and do AJAX call.

您认为哪种更好，更容易代码？

What do you think is better, more easier to code?

推荐答案

首先突出显示光标下的单词然后显示它的含义，检查我的小提琴： http://jsfiddle.net/shahe_masoyan/z7nkU/1/

First highlight the word under the cursor then show the meaning of it, check my fiddle: http://jsfiddle.net/shahe_masoyan/z7nkU/1/

HTML

    <div>
        <span>This text is a test text</span>
    </div>

JavaScript

$('div').each(function() {
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});

$('div span').hover(
    function() { 
        $(this).css('background-color','#ffff66'); 
        alert(getTheMeaningOfTheWord($(this).html()));
    },
    function() { 
        $(this).css('background-color',''); 
    }
);

function getTheMeaningOfTheWord(word){

    return word+' = theMeaning';
}

这篇关于鼠标突出显示单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！