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

时间:2014-12-23 15:23:35

标签: javascript jquery html

我的网站上有一个列表,我想添加一个mouseenter函数,这样当鼠标移动到一个项目上时会出现两行,当鼠标离开时消失。我可以使线条显示和消失,但是当它们执行时,它们会上下移动列表项目,这会降低功能并且在美学上没有吸引力。我想在不替换列表中的元素的情况下显示行(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();
                                   });
              });

注意:我已将此功能应用于跨度,因为我可以更轻松地控制其宽度。

4 个答案:

答案 0 :(得分:2)

最好的方法是使用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

答案 1 :(得分:2)

我同意Maverick,但我会扩展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;
}

答案 2 :(得分:1)

果然,你应该按照Maverick的建议使用CSS 有趣的解决方案是透明的边框,即使在你的(简单)的情况下,我也应该这样做:

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

        /* just subtract the 2px added by the border-top and border-bottom from the height of the <li> */
        margin:-1px 0 -1px 0; 
    } 

重新(重新)更新小提琴here。 ;)

答案 3 :(得分:0)

添加额外的行时,有两种方法可以保持span元素的位置:

  1. 使用行的空间初始化页面,这样当您添加行时,您不需要额外的空间,也不必移动元素。

  2. 如果要添加类似工具提示的内容(实际情况并非如此),则可以使元素浮动在其余元素之上,以便不会重新调整元素的大小。