在tr上使用:hover时的CSS边框问题

问题描述

我正在尝试突出显示数据表中鼠标悬停的行.我正在尝试使用border-top和border-bottom进行此操作.为了提高可读性，我在备用行上还添加了透明的png.

I'm trying to highlight the row the mouse is over in a table of data. I'm trying to do this with a border-top and border-bottom. To help the readability i also have a light transparent png on alternate rows.

似乎当我打开和关闭边框(在IE8 +和FF中工作)时，行会稍微跳一下.我认为我可以通过设置一个非悬停的透明边框(而不是根本没有透明边框)来解决此问题.这台x浏览器现在兼容吗?

It seems that when I turn on and off the borders (works in IE8+ and FF) the rows jump around a little. I think I can fix it by having a a non-hover transparent border, rather than none at all. Is this x-browser compatible now days?

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

In Chrome, the highlighted row's border does not go away when you move the mouse off the row, why?

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

更新:我已修复了chrome无法解决的边框问题.我将边界移到TD而不是TR.这些行仍然在跳来跳去.

Update: I've fixed the border issue in chrome where they wouldn't go away. I moved the border to the TDs rather than the TR. The rows are still jumping around though.

谢谢！

推荐答案

在正常状态元素上放置透明边框.

put an transparent border on your normal state elements.

应用:hover 时，边框的大小会更改元素占用的大小.

When the :hover is applied the size of the border changes the size the element takes up.

例如:

.myelement
{
        border:4px solid transparent;
}

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

http://jsfiddle.net/mPmRA/

-更具体地针对您的表(ugh:表...折叠边框使以上内容无法正常工作)

- more specifically to your table (ugh: tables ... collapse border makes the above not work properly)

http://jsfiddle.net/mPmRA/1/

将透明边界放在 tr

tr
{
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
}

对于悬停，请执行以下操作:

And for the hover do something like:

tr:hover td
{
    border-top:4px solid green;
    border-bottom:4px solid green;
}

td 边框将出现在该行的边框上方.

The td borders will then appear ABOVE the row's border.

这篇关于在tr上使用:hover时的CSS边框问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！