CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了使用时出现CSS边框问题:将鼠标悬停在tr上大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在数据表中突出显示鼠标所在的行.我正在尝试使用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;
}

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边框将显示在行的边框上方.

大佬总结

以上是大佬教程为你收集整理的使用时出现CSS边框问题:将鼠标悬停在tr上全部内容,希望文章能够帮你解决使用时出现CSS边框问题:将鼠标悬停在tr上所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: