Cols, Colgroups 및 CSS : 호버 Psuedoclass
https://stackoverflow.com/questions/848840
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
개인의 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));
}
