Cols, Colgroups 및 CSS : 호버 Psuedoclass
-
21-08-2019 - |
문제
개인의 BMI를 표시하기 위해 테이블을 만들려고합니다.
이것의 일부로, 나는 다음과 같이 <tr>
그리고 <col>
(또는 <colgroup>
) 교차로가 더 명백하기 위해서도 강조됩니다.
테이블에는 메트릭과 제국 측정이 모두 포함되어 있으므로 호버는 셀에서 멈출 필요가 없으며 실제로 한 축에서 다른 축로 확장되면 보너스가됩니다. 또한 XHTML 1.1 Strict 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-wards 가야합니까?
해결책
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>
다른 팁
내가 만난 매우 괜찮은 jQuery 플러그인이 있습니다. 여기에 있습니다 이것은 많은 예제로 이런 종류의 일을 잘합니다. 우선적으로 나는 그것을 사용합니다.
Afaik CSS가 떠납니다 TR
어쨌든 IE에서는 지원되지 않으므로 최대의 TR 부분은 Firefox에서만 작동합니다.
조차 본 적이 없다 :hover
Col/Colgroup에서 작업하므로 가능한지 확실하지 않습니다 ...
JavaScript 구현에 갇혀있을 수 있다고 생각하십시오.
그 예가 있습니다 여기 그것은 Firefox에서 작동하지만 다시 깨졌습니다. 즉, Cols는 작동하지 않습니다.
나는이 깔끔한 방식으로 그 일을하는 것을 겪었습니다. CSS-tricks.com 나는 또한 그것을 엉망으로 만들면서 바이올린을 준비했지만 멋진 것은 없지만 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));
}