COLS,山口组和CSS:hover伪类
-
21-08-2019 - |
题
我试图创建一个表来显示个人的BMI。
作为其中的一部分,我想,上:悬停,对于<tr>
和强> <col>
(或<colgroup>
)被还强调,为了使交叉点更明显
如该表将采用公制和英制测量,:悬停不必停止在所述小区(从任何方向),并将,其实是一个奖金,如果它从一个轴到其它扩展。我还使用的XHTML 1.1严格的DOCTYPE,如果这有差别?
因此...的例子(实表的...大),但是这应代表:
<script>
tr:hover {background-color: #ffa; }
colgroup:hover,
col:hover {background-color: #ffa; }
</script>
...
<table>
<col class="weight"></col><colgroup span="3"><col class="bmi"></col></colgroup>
<tr>
<th></th>
<th>50kg</th>
<th>55kg</th>
<th>60kg</th>
</tr>
<tr>
<td>160cm</td>
<td>20</td>
<td>21</td>
<td>23</td>
</tr>
<tr>
<td>165cm</td>
<td>18</td>
<td>20</td>
<td>22</td>
</tr>
<tr>
<td>170cm</td>
<td>17</td>
<td>19</td>
<td>21</td>
</tr>
</table>
我要求不可能的事,我需要去jQuery的病房?
解决方案
下面是一个使用没有使用Javascript纯CSS方法。
我用::before
和::after
伪元素做的行和列高亮。 z-index
不断的情况下,你需要处理单击事件<tds>
下面的高亮显示。 position: absolute
允许他们离开<td>
的范围。在overflow: hidden
<table>
隐藏亮点溢出。
这是没有必要的,但我也使它只选择行或列,当你在报头是。该.row
和.col
类照顾这。如果您希望简化起见,可以将其删除。
这适用于所有现代浏览器(和无为而缓慢下降旧版浏览器上)。
演示: http://jsfiddle.net/ThinkingStiff/rUhCa/
输出:
CSS:
table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td, th, .row, .col {
cursor: pointer;
padding: 10px;
position: relative;
}
td:hover::before,
.row:hover::before {
background-color: #ffa;
content: '\00a0';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}
td:hover::after,
.col:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
HTML:
<table>
<tr>
<th></th>
<th class="col">50kg</th>
<th class="col">55kg</th>
<th class="col">60kg</th>
<th class="col">65kg</th>
<th class="col">70kg</th>
</tr>
<tr>
<th class="row">160cm</th>
<td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
</tr>
<tr>
<th class="row">165cm</th>
<td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
</tr>
<tr>
<th class="row">170cm</th>
<td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
</tr>
<tr>
<th class="row">175cm</th>
<td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
</tr>
</table>
其他提示
据我所知CSS悬停在公司中不支持IE反正TR
,所以最好的是,TR部分将只工作在Firefox。
从来没有见过在一个山坳/ COLGROUP一个:hover
工作,所以不知道这是可能的...
想你可能用Javascript实现卡住。
即使世界的示例这里在Firefox工作(行&COLS) 但同样它在IE浏览器的破碎...的cols不起作用。
我来翻过从 css-tricks.com <做了这种简洁的方式/ A>我也准备了小提琴,而瞎搞与它没有什么花哨但你可以得到由CSS-招页面提供的相同代码的想法了。
//在HTML
<table>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
// JS的
$(function(){
$("table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
$(this).parent().addClass("hover");
$("colgroup").eq($(this).index()).addClass("hover");
}
else {
$(this).parent().removeClass("hover");
$("colgroup").eq($(this).index()).removeClass("hover");
}
});
})
此处退房小提琴
现场答案( https://jsfiddle.net/craig1123/d7105gLf/ )
有已经CSS和JQuery答案;不过,我写了一个简单的纯JavaScript的答案。
我第一次找到所有的col
和td
标签,通过做element.cellIndex
获取每个单元格的列索引,然后添加一个CSS类与mouseenter
背景和mouseleave
删除它。
HTML
<table id='table'>
<col />
<col />
<col />
<col />
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Birthdate</th>
<th>Preferred Hat Style</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abraham Lincoln</td>
<td>204</td>
<td>February 12</td>
<td>Stovepipe</td>
</tr>
<tr>
<td>Winston Churchill</td>
<td>139</td>
<td>November 30</td>
<td>Homburg</td>
</tr>
<tr>
<td>Rob Glazebrook</td>
<td>32</td>
<td>August 6</td>
<td>Flat Cap</td>
</tr>
</tbody>
</table>
CSS
body {
font: 16px/1.5 Helvetica, Arial, sans-serif;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
table th {
text-align: left;
}
table tr, table col {
transition: all .3s;
}
table tbody tr:hover {
background-color: rgba(0, 140, 203, 0.2);
}
table col.hover {
background-color: rgba(0, 140, 203, 0.2);
}
tr, col {
transition: all .3s;
}
tbody tr:hover {
background-color: rgba(0,140,203,.2);
}
col.hover {
background-color: rgba(0,140,203,.2);
}
JS
const col = table.getElementsByTagName('col');
const td = document.getElementsByTagName('td');
const columnEnter = (i) => col[i].classList.add('hover');
const columnLeave = (i) => col[i].classList.remove('hover');
for (const cell of td) {
const index = cell.cellIndex;
cell.addEventListener('mouseenter', columnEnter.bind(this, index));
cell.addEventListener('mouseleave', columnLeave.bind(this, index));
}