我试图在数据表中突出显示鼠标所在的行.我正在尝试使用border-top和border-bottom.为了提高可读性,我在备用行上也有一个透明的png.
似乎当我打开和关闭边框(在IE8和FF中工作)时,行会跳转一点.我想我可以通过一个非悬停透明边框来修复它,而不是根本没有.这个x浏览器现在兼容吗?
在Chrome中,当您将鼠标移离行时,突出显示的行的边框不会消失,为什么?
http://justinzaun.com/Tree/people/
更新:我已经修复了chrome中的边框问题,它们不会消失.我将边界移动到TD而不是TR.行仍在跳跃.
谢谢!
解决方法
在正常的状态元素上放置透明边框.
当应用:悬停时,边框的大小会更改元素占用的大小.
例如:
.myelement { border:4px solid transparent; } .myelement:hover { border: 4px solid green; }
编辑: – 更具体地说到你的桌子(呃:桌子……折叠边框使上面的工作不正常)
把转移边界放在tr上
tr { border-top:4px solid transparent; border-bottom:4px solid transparent; }
而对于悬停,请执行以下操作:
tr:hover td { border-top:4px solid green; border-bottom:4px solid green; }
然后,td边框将显示在行的边框上方.