我试图在数据表中突出显示鼠标所在的行。我正在尝试用 border-top 和 border-bottom 来做到这一点。为了提高可读性,我还在交替行上放置了一个浅色透明的 png。
似乎当我打开和关闭边框(适用于 IE8+ 和 FF)时,行会稍微跳动。我想我可以通过设置非悬停透明边框来解决这个问题,而不是根本没有边框。现在这个 x 浏览器兼容吗?
在 Chrome 中,当您将鼠标移离该行时,突出显示的行的边框不会消失,为什么?
http://justinzaun.com/Tree/people/ http://justinzaun.com/Tree/people/
Update:我已经解决了 chrome 中的边框问题,它们不会消失。我将边界移至 TD,而不是 TR。不过,行仍然在跳跃。
Thanks!
在正常状态元素上放置透明边框。
当。。。的时候:hover
应用边框的大小会更改元素占用的大小。
eg:
.myelement
{
border:4px solid transparent;
}
.myelement:hover
{
border: 4px solid green;
}
http://jsfiddle.net/mPmRA/ http://jsfiddle.net/mPmRA/
EDIT:-更具体地针对您的餐桌(呃:表格......折叠边框使上面的内容无法正常工作)
http://jsfiddle.net/mPmRA/1/ http://jsfiddle.net/mPmRA/1/
把透明边框放在上面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;
}
The td
然后边框将出现在行边框上方。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)