javascript - 使用 jQuery 添加元素而不替换其他元素

Question

我的网站上有一个列表，我想添加一个 mouseenter 函数，以便当鼠标移到一个项目上时出现两行，并在鼠标离开时消失。我能够使线条出现和消失，但是当它们这样做时，它们会上下移动列表项，这会减少功能性并且在美观上没有吸引力。我想让这些行出现(一根在 SPAN 上方，一根在 SPAN 下方)而不替换列表中的元素。

这是我的代码和演示:http://jsfiddle.net/strw22fe/

脚本:

     $(document).ready(function(){
              $("SPAN").mouseenter(function() {
                                   var line = "<hr>";


                                    $("SPAN").eq(this.id-1).before(line);
                                 $("SPAN").eq(this.id-1).after(line);
                                 });
              });
$(document).ready(function(){
              $("SPAN").mouseleave(function() {

                                   $("hr").remove();
                                   });
              });

注意:我已将此函数应用于跨度，因为我可以比控制 li 的宽度更轻松地控制其宽度。

Answer 1

最好的方法是使用 CSS :hover

像这样的事情应该没问题。

删除 JS 代码并安装以下 CSS 代码

li:hover{
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

li{
    list-style-position: inside;
    border-top: 1px solid transparent;
    border-bottom:1px solid transparent;
}

这是您的 updated fiddle .