在選定文本後面插入空跨度

-1

我正在處理用戶可以選擇文本的字典功能，並且在將選定內容懸停在第二個左右後，它將顯示單詞或短語的定義。在選定文本後面插入空跨度

https://gfycat.com/IcyWebbedCapeghostfrog

當前實現，我已是非常基本的，並且使用mousemove事件，並檢查是否鼠標在選擇範圍內。我認爲，如果我只是使用mouseenter和mouseleave，但選定的文本不是實際的元素，效率會更高。我查閱過的關於這個問題的所有帖子都是通過用包含在span中的文本替換選定的文本來解決的，但是似乎它會真的很麻煩，每次我做出一個來回都要替換文本選擇。由於我不想更改我選擇的文本的背景顏色或顏色，我認爲在選定文本後面創建一個空跨度會更好。這樣，我可以隨時隨地輕鬆顯示/隱藏/刪除它。

我不知道如何開始這個，但搜索並沒有真正發現任何有用的東西。任何幫助將不勝感激，非常感謝你！

來源

2017-10-19 Mashiro-chan

你必須尋找**工具提示**爲您purpose.bind上選擇文本的工具提示。 –

[Detect hover on selected text]（https://stackoverflow.com/questions/30599608/detect-hover-on-selected-text） –

的可能重複顯示您當前的代碼。 – aaron

你可以做這樣的事情。

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

希望，幫助你！ :)

來源

2017-10-19 07:00:10

$("#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>

來源

2017-10-19 07:09:09

在選定文本後面插入空跨度

回答

相關問題