在选定文本后面插入一个空范围

Question

我正在开发一个字典功能，用户可以在其中选择文本，然后将鼠标悬停在所选内容上一秒钟左右，它将显示单词或短语的定义。

https://gfycat.com/IcyWebbedCapeghostfrog

我目前的实现非常初级，使用mousemove 事件并检查鼠标是否在选择范围内。我认为如果我只使用mouseenter 和mouseleave 会更加高效，但所选文本不是实际元素。我查找过的关于这个问题的所有帖子都是通过将选定的文本替换为包含在跨度中的文本来解决的，但这似乎每次我做一个来回替换文本时都会很麻烦选择。由于我不想更改我选择的文本的背景颜色或颜色，我认为在所选文本后面创建一个空白跨度会更好。这样，我可以随时随地轻松地显示/隐藏/删除它。

我不知道如何开始使用它，而且搜索并没有真正找到任何有用的东西。任何帮助将不胜感激，非常感谢！

Answer 1

你可以这样做。

<div class="hide-class"> </div>

在 css 中，

.hide-class {
    display: none;
}

最初，这个 div 是隐藏的。您可以通过 show() 和 hide() 方法操作此 div。

例如，

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(".hide-class").show();
    });
    $("p").mouseleave(function(){
        $(".hide-class").hide();
    });
});
</script>

希望对您有所帮助！ :)

Answer 2

$("#addBtn").click(function() {
  // add <li> to existing <ul>
  // http://stackoverflow.com/questions/1145208/jquery-how-to-add-li-in-an-existing-ul
  $("#names")
    .append($('<li>').append(
      $('#selTxt').val()
    ));
  $("#tooltip").hide();
});

function placeTooltip(x_pos, y_pos) {
  $("#tooltip").css({
    top: y_pos + 'px',
    left: x_pos + 'px',
    position: 'absolute'
  });
}

  
  $('#longtext').mouseup(function(e) {  
   // get selected text
  // http://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text
  var selection = window.getSelection().toString();  
  $('#selTxt').val(selection.toString());     
    var x = e.pageX;
    var y = e.pageY;  
    placeTooltip(x, y);
    $("#tooltip").show();    
  });

#tooltip {
  background-color: #EEE;
  display: inline-block;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  border: 1px solid;
  border-color: #3333FF;
  border-radius: 15px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h3>LIST</h3>

<ul id="names">

</ul>

<div id="tooltip">
<span>I am a sample span.change my content!</span>
</div>

<div id='longtext'>Oliver Twist, subtitled The Parish Boy's Progress, is the second novel by English author Charles Dickens, published by Richard Bentley in 1838. The story is about an orphan, Oliver Twist, who endures a miserable existence in a workhouse and then is placed
  with an undertaker. He escapes and travels to London where he meets the Artful Dodger, leader of a gang of juvenile pickpockets. Naïvely unaware of their unlawful activities, Oliver is led to the lair of their elderly criminal trainer Fagin.
  <hr>
  <br>Thomas "Tom" Sawyer is the title character of the Mark Twain novel Adventures of Tom Sawyer (1876). He appears in three other novels by Twain: Adventures of Huckleberry Finn (1884), Tom Sawyer Abroad (1894), and Tom Sawyer, Detective (1896). Sawyer
  also appears in at least three unfinished Twain works, Huck and Tom Among the Indians, Schoolhouse Hill, and Tom Sawyer's Conspiracy. While all three uncompleted works were posthumously published, only Tom Sawyer's Conspiracy has a complete plot, as
  Twain abandoned the other two works after finishing only a few chapters. The fictional character's name may have been derived from a jolly and flamboyant fireman named Tom Sawyer whom Twain was acquainted with in San Francisco, California, while Twain
  was employed as a reporter at the San Francisco Call.Twain used to listen to Sawyer tell stories of his youth, "Sam, he would listen to these pranks of mine with great interest and he'd occasionally take 'em down in his notebook. One day he says to
  me: ‘I am going to put you between the covers of a book some of these days, Tom.’ ‘Go ahead, Sam,’ I said, ‘but don’t disgrace my name.’" Twain himself said the character sprang from three people, later identified as: John B. Briggs (who died in 1907),
  William Bowen (who died in 1893) and Twain; however Twain later changed his story saying Sawyer was fully formed solely from his imagination, but as Robert Graysmith says, "The great appropriator liked to pretend his characters sprang fully grown from
  his fertile mind."</div>