使用table鼠标移上去改变单元格边框颜色的方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了使用table鼠标移上去改变单元格边框颜色的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2039字，纯文字阅读大概需要3分钟。
内容图文
表格定义了border-collapse:collapse;边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。用td:hover,显示不全
搜索了好久，没有找到好的方法，用左右边框也不完美。
于是就在想，移上去的时候给加个伪元素after，绝对定位。
定义和用法
:after 伪元素在元素之后添加内容。
这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。
注释：如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>border-hover</title><style type="text/css">.w1000{width:1000px;margin:0 auto;}.table{width:100%;border-collapse:collapse;text-align:center;font-size:14px;}.table tr th{border: 1px solid #d9dbda;padding:5px 0;}.table tr td{border: 1px solid #d9dbda;}.height2{height:61px;line-height:61px;}.height1{height:30px;line-height:30px;}.table tr td:hover .list-p{position:relative;}.table tr td:hover .list-p:after{
content: "";
height: 100%;
left: -1px;
position: absolute;
top: -1px;
width: 100%;
z-index: 100;}.table tr td.list01-td:hover .list-p:after{
border: 1px solid #b1bac6;}.table tr td.list02-td:hover .list-p:after{
border: 1px solid #76ca5a;}.table tr td.list03-td:hover .list-p:after{
border: 1px solid #ff9600;}</style></head><body>
<p class="w1000">
<table class="table" cellpadding="0" cellspacing="0" >
<thead>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" class="list01-td"><p class="list-p height2">星期</p></td>
<td colspan="5" class="list02-td" ><p class="list-p height1">星期</p></td>
<td></td>
</tr>
<tr>
<td class="list02-td"><p class="list-p height1">星期</p></td>
<td colspan="4"></td>
<td></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2" class="list03-td"><p class="list-p height1">星期</p></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</p></body></html>显示：
提醒：
1.开始做的时候没做合并列的，合并行的简单点不需要加高度。
以上就是使用table鼠标移上去改变单元格边框颜色的方法的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的使用table鼠标移上去改变单元格边框颜色的方法全部内容，希望文章能够帮你解决使用table鼠标移上去改变单元格边框颜色的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。