html – 悬停的轮廓表行

html – 悬停的轮廓表行,第1张

概述我试图突出显示一个表格行的边界.不幸的是,这仅适用于第一行单元格.较低的行有一个不改变颜色的边框.我已经尝试使用大纲,但它不会很好玩:hover in webkit. http://jsfiddle.net/S9pkM/2/ 想象你的标准表html.一些tr有一些td.悬停在一行应该突出显示其红色边框. table { border-collapse: collapse; } /*I am awa 我试图突出显示一个表格行的边界.不幸的是,这仅适用于第一行单元格.较低的行有一个不改变颜色的边框.我已经尝试使用大纲,但它不会很好玩:hover in webkit.

http://jsfiddle.net/S9pkM/2/

想象你的标准表HTML.一些tr有一些td.悬停在一行应该突出显示其红色边框.

table { border-collapse: collapse; } /*I am aware of separate */table td { border: 3px solID black; }table tr:hover td { border-top-color: red; border-bottom-color: red; }table tr:hover td:first-child { border-left-color: red; }table tr:hover td:last-child  { border-right-color: red; }

我可以采用替代方法,但是我坚持桌面结构.除了标准< table>之外,不要插入额外的HTML < TR> < TD>

解决方法 我一直在面对同样的问题,终于找到了一个更简单的解决方案 here.

您可以使用适用于1px边框的CSS诡计(border-style:double;):

#mytable tr.row:hover td{    border-style: double;    border-color: red;}

这将使您的边框颜色工作(成为最高的一个),无论什么. 总结

以上是内存溢出为你收集整理的html – 悬停的轮廓表行全部内容,希望文章能够帮你解决html – 悬停的轮廓表行所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1132098.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存