CODEWITHSUNDEEP
javascriptjqueryhtmlhover
cabralpinto
cabralpinto

Reputation: 2068

Activate hover action on a certain word

Okay, so this is something that has already been done so I know it's possible. What I'd like is that, when the user hovers the mouse on some word defined by the wordHoverAssign() function, something would get activated.

So, in a more concise manner: When the page is loaded the text I love potatoes! shows up on screen, created with HTML. Then the function wordHoverAssign("potatoes") is executed. What should happen then, when I hover the word potatoes, is that an alert message would pop up with, for example, this message You hovered the word!.

Is this possible? How would I go about doing it? I'd really like it if I didn't have to use any more frameworks/plugins. I'm using jQuery by the way.

Thank you.

My code so far (if you don't feel like setting it up):

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>

Upvotes: 2

Views: 1282

Answers (2)

fabio
fabio

Reputation: 2339

The following allows you to assign different function to any word inside the #content div. The associated function is called only when the specific word is hovered.

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

Upvotes: 1

Manwal
Manwal

Reputation: 23816

As per your need :contains('text') suits you better. see example:

wordHoverAssign("potatoes");

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

Here is Updated DEMO

But above code will alert twice because of hover event also bind with body, so my suggestion is use special tag. See following snippet:

wordHoverAssign("potatoes");

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

Another DEMO for hover in p tag. It won't work on body hover.

Upvotes: 1

Related Questions