Get Hovered Word From Hover() In Jquery?

I want to make an auto translate from the word that I mouse over on it. I use $('p').hover(function () { var hoveredWord = $(this).text(); translate(hoveredWord, 'en'); // func

Solution 1:

I would do in a different way. I would wrap all the text content using <span>:

$(function() {
  $('p').html(function () {
    var cont = [];
    return "<span>" + $(this).text().split(" ").join("</span> <span>") + "</span>";
  }).on("mouseover", "span", function() {
    var hoveredWord = $(this).text();
    console.log(hoveredWord);
    // translate(hoveredWord, 'en'); // function to translate a word to English Language
  });
});

span:hover {background: #ccf;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello, World! How are you?</p>

And I won't use the hover function. It is unreliable and deprecated.