如何显示显示单词更正的弹出对话框

Question

我正在创建一个单词更正扩展，它将错误的单词包装在一个 span 元素中。 当用户 hover 超过单词时，将出现可能更正的下拉菜单。 这是我的代码，它无法正常工作，目前它们彼此并排出现，如何将它们排成一行。

还有更好的方法吗？

 $(".error").each(function(index, element) { $(this).css('cursor', 'pointer'); $(this).mouseover(function() { if ($(this).has('.popup-base').length > 0) { return; } var popup = document.createElement('div'); popup.className = 'popup-base'; let correctionslist = element.getAttribute('suggestions').split(','); for (correct of correctionslist) { popup.innerHTML += '<span class="listitem">' + correct + ' </span>'; } $(this).append(popup); }); });

 .error { background-color: yellow; position: relative; display: inline-block; }.popup-base { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 12px 16px; z-index: 1; }.error:hover.popup-base { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div contenteditable><span data-offset-key="6j93r-0-0"><span data-text="true">Por favor, leia as <span class="error" suggestions="reges,regra,regrãs,regres,regras,regrá,regrã,regôs,regre,regas,regro,regos" style="cursor: pointer;">regrs</span>. Meu <span class="error" suggestions="nom." style="cursor: pointer;">nom</span> é <span class="error" suggestions="Nícolas,Nicola,Ricolas,Picolas,Ni colas,Nicol as,Nicolaus,Unicolas,Nicolau" style="cursor: pointer;">Nicolas</span>.&nbsp;Brasil é o <span class="error" suggestions="unto,quento,quinto,quanto,queto,sunto,quito,quoto,cunto,munto,punto,junto,quinoto,quinteto,quiranto" style="cursor: pointer;">qunto</span> <span class="error" suggestions="mair,amor,moar,maro,mar,mor,maore,maori,maior,mafor,major,mora,maar" style="cursor: pointer;">maor</span> pais do mundo.</span> </span> </div>

Answer 1

您的listitem元素正在使用<span>这是一个内联元素，以及为什么单词彼此相邻而不是彼此重叠显示。 您可以使用不同的元素或将 class 添加到listitem元素来制作display:block 。 在此示例中，我选择为列表项 class 添加 CSS。为了好玩，我还添加了listitem效果。

 $(".error").each(function(index, element) { $(this).css('cursor', 'pointer'); $(this).mouseover(function() { if ($(this).has('.popup-base').length > 0) { return; } var popup = document.createElement('div'); popup.className = 'popup-base'; let correctionslist = element.getAttribute('suggestions').split(','); for (correct of correctionslist) { popup.innerHTML += '<span class="listitem">' + correct + ' </span>'; } $(this).append(popup); }); });

 .error { background-color: yellow; position: relative; display: inline-block; }.popup-base { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 12px 16px; z-index: 1; }.error:hover.popup-base { display: block; }.listitem { display:block; margin:7px 0; }.listitem:hover { background-color:blue; color:white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div contenteditable><span data-offset-key="6j93r-0-0"><span data-text="true">Por favor, leia as <span class="error" suggestions="reges,regra,regrãs,regres,regras,regrá,regrã,regôs,regre,regas,regro,regos" style="cursor: pointer;">regrs</span>. Meu <span class="error" suggestions="nom." style="cursor: pointer;">nom</span> é <span class="error" suggestions="Nícolas,Nicola,Ricolas,Picolas,Ni colas,Nicol as,Nicolaus,Unicolas,Nicolau" style="cursor: pointer;">Nicolas</span>.&nbsp;Brasil é o <span class="error" suggestions="unto,quento,quinto,quanto,queto,sunto,quito,quoto,cunto,munto,punto,junto,quinoto,quinteto,quiranto" style="cursor: pointer;">qunto</span> <span class="error" suggestions="mair,amor,moar,maro,mar,mor,maore,maori,maior,mafor,major,mora,maar" style="cursor: pointer;">maor</span> pais do mundo.</span> </span> </div>