在某个词上激活悬停动作

Question

好的，这是已经完成的事情，所以我知道这是可能的。我想要的是，当用户将鼠标悬停在 wordHoverAssign() 函数定义的某个词上时，某些东西会被激活。

因此，以更简洁的方式：当页面加载时，文本 我爱土豆！ 出现在屏幕上，由 HTML 创建。然后执行函数wordHoverAssign("potatoes")。那么，当我将 potatoes 悬停在单词 potatoes 上时，会弹出一条警告消息，例如这条消息 You hovered the word!.

这可能吗？我会怎么做呢？如果我不必再使用它，我真的很喜欢它 frameworks/plugins。顺便说一句，我正在使用jQuery。

谢谢。

到目前为止我的代码（如果你不想设置它）：

wordHoverAssign("potatoes");

function wordHoverAssign(theWord) {
  //code here
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I love potatoes!</p>

Answer 1

根据您的需要 :contains('text') 更适合您。参见示例：

wordHoverAssign("potatoes");

function wordHoverAssign(theWord) {
  $( ":contains("+theWord+")" ).hover(function(){
      alert("Hover happend");
  })
}

这里是Updated DEMO

但是上面的代码会提示两次，因为悬停事件也绑定了 body，所以我的建议是使用特殊标签。请参阅以下代码段：

wordHoverAssign("potatoes");

function wordHoverAssign(theWord) {
  $( "p:contains("+theWord+")" ).hover(function(){
      alert("Hover happend");
  })
}

悬停在 p 标签中的另一个 DEMO。它不适用于 body 悬停。

Answer 2

以下允许您为#content div 中的任何单词分配不同的功能。仅当特定单词悬停时才会调用关联函数。

<div id="content">
    I love potatoes!<br/>
    She loves something else<br/>
    The potatoes coming again.
</div>

<script>
    window.wordsAssigned = {};
    function wordHoverAssign(word,func){
        wordsAssigned[word] = func;
    }

    wordHoverAssign('potatoes',function(){
        alert('Patatoes hovered!');
    });
    wordHoverAssign('something else',function(){
        alert('something else!');
    });

    $(function(){
        var content = $('#content');
        var html = content.html();
        for(var word in wordsAssigned){
            html = html.replace(new RegExp(word,"gm"),'<span onmouseover="wordsAssigned[\''+word+'\']()">'+word+'</span>');
        }
        content.html(html);
    })
</script>

在某个词上激活悬停动作

Activate hover action on a certain word

html

javascript

jquery

hover