Question

我正在尝试在数据表中突出显示鼠标所在的行。我正在尝试使用border-top和border-bottom。为了提高可读性，我在备用行上也有一个透明的png。

似乎当我打开和关闭边框（在IE8 +和FF中工作）时，行会跳转一点。我想我可以通过一个非悬停透明边框来修复它，而不是根本没有。这个x浏览器现在兼容吗？

在Chrome中，当您将鼠标移离行时，突出显示的行的边框不会消失，为什么？

http://justinzaun.com/Tree/people/

更新：我已经修复了chrome中的边框问题，它们不会消失。我将边界移动到TD而不是TR。行仍在跳跃。

谢谢！

Answer 1

在正常状态元素上添加透明边框。

当应用:hover时，边框的大小会改变元素占用的大小。

例如：

.myelement
{
        border:4px solid transparent;
}

.myelement:hover
{
    border: 4px solid green;
}

http://jsfiddle.net/mPmRA/

编辑： - 更具体地说到你的桌子（呃：桌子......折叠边框使上面的内容无法正常工作）

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;
}

td边框将显示在行的边框上方。

Answer 2

更简单的方法是添加“margin-top：-1px; margin-bottom：-1px;”到：悬停样式，这会用边框修正新的高度。

Answer 3

确保您的边框设置为INSIDE而不是外部。不幸的是，边框的插入选项还不是CSS的一部分。这里有一些CSS使用框阴影在元素中创建边框：

.mytable tr:hover {
    -moz-box-shadow: inset 0 0 1px #000;
}

这将在元素的INSIDE上形成1px黑色边框！：d 我希望这有帮助，如果你设置在黑色虚线边框上，你唯一的选择是设置绝对定位，并单独定位每个表行，这是一个痛苦的屁股。：/ 如果你有相对或静态定位，当其他尺寸增加时，元素将移动。 Wulf的想法可能有点配置，但说实话，盒子阴影是一个更好的边界，然后是虚线的边框。（如果我自己这么说的话，有点俗气。^ _ ^抱歉。）

使用时出现CSS边框问题：将鼠标悬停在tr上

3 个答案: