Rumah > Artikel > hujung hadapan web > 使用table鼠标移上去改变单元格边框颜色的方法
使用table鼠标移上去改变单元格边框颜色的方法
- 高洛峰asal
- 2017-03-17 10:16:033337semak imbas
表格定义了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.开始做的时候没做合并列的，合并行的简单点不需要加高度。
Atas ialah kandungan terperinci 使用table鼠标移上去改变单元格边框颜色的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：实现Html单选按钮自定义样式的方法介绍Artikel seterusnya：处理表单使input等文本框为只读不可编辑的方法