大佬教程收集整理的这篇文章主要介绍了html – 如何使用CSS网格布局在行表上进行悬停状态,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我只想用CSS.
任何人都可以给我一个解决方案吗?
.table { display: grid; grid-template-columns: [col-start] auto [col-end]; grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end]; grid-auto-rows: auto; grid-auto-columns: auto; grid-gap: 1px; } .table>* { background: gray; padding: 10px; } .heading { background: navy; color: #fff; grid-row: header; }
<div class="table"> <div class="heading">Title 1</div> <div class="heading">Title 2</div> <div class="heading">Title 3</div> <div class="heading">Title 4</div> <div class="heading">Title 5</div> <div class="row">Row 1</div> <div class="row">Row 1</div> <div class="row">Row 1</div> <div class="row">Row 1</div> <div class="row">Row 1</div> <div class="row">Row 2</div> <div class="row">Row 2</div> <div class="row">Row 2</div> <div class="row">Row 2</div> <div class="row">Row 2</div> <div class="row">Row 3</div> <div class="row">Row 3</div> <div class="row">Row 3</div> <div class="row">Row 3</div> <div class="row">Row 3</div> </div>
这个技巧涉及对标记的少量更改以及更多的CSS.
.table { display: grid; grid-template-columns: [col-start] auto [col-end]; grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end]; grid-auto-rows: auto; grid-auto-columns: auto; grid-gap: 1px; overflow: hidden; background: gray; } .table>* { padding: 10px; position: relative; } .heading { background: navy; color: #fff; grid-row: header; } .row span { position: relative; z-index: 2; } .row:before { content: ""; position: absolute; top: 0; bottom: 0; right: -1000%; left: -1000%; z-index: 1; } .row:after { content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; z-index: 2; background-color: #fff; } .row:nth-child(5n+5)::after { bottom: -1px; right: 0; left: -1000%; height: 1px; z-index: 3; width: auto; top: auto; background-color: #fff; } .row:hover::before { background-color: red; }
<div class="table"> <div class="heading">Title 1</div> <div class="heading">Title 2</div> <div class="heading">Title 3</div> <div class="heading">Title 4</div> <div class="heading">Title 5</div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 1</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 2</span></div> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> <div class="row"><span>Row 3</span></div> </div>
以上是大佬教程为你收集整理的html – 如何使用CSS网格布局在行表上进行悬停状态全部内容,希望文章能够帮你解决html – 如何使用CSS网格布局在行表上进行悬停状态所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。