我的网站上有一个列表,我想添加一个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();
});
});
注意:我已将此功能应用于跨度,因为我可以更轻松地控制其宽度。
答案 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元素的位置:
使用行的空间初始化页面,这样当您添加行时,您不需要额外的空间,也不必移动元素。
如果要添加类似工具提示的内容(实际情况并非如此),则可以使元素浮动在其余元素之上,以便不会重新调整元素的大小。