html : hover 테이블 열

Question

html 테이블의 배경 열을 어떻게 바꿀 수 있습니까? 마우스가 위에있을 때 어떻게해야합니까?

가급적이면 css 만 사용하십시오.

Answer 1

셀 또는 행에서만 작동합니다 (미안). 예 :

td { 
    background-color: blue; 
} 

td:hover { 
    background-color: red; 
} 

JavaScript 솔루션을 사용할 수 있지만 현재 CSS에서는 선택자의 제한으로 인해 원하는대로 할 수 없습니다.

td /* all cells */ 
{ 
    background-color: blue; 
} 

tr /* all rows */ 
{ 
    background-color: pink; 
} 

/* nothing for all columns */ 

Answer 2

깨끗한 HTML + CSS 방법이 없다고 생각합니다. Javascript가 대안입니다 (예 : jQuery tableHover plugin)

Answer 3

당신은 <col> 태그와 col:hover { background: red; } 스타일로 실험을 시도 할 수 있습니다,하지만 난 그것을 작동합니다 의심한다. 어쨌든 이것은 MSIE의 이전 버전에서는 제대로 작동하지 않으므로이를 수행하려면 javascript가 필요합니다.

Answer 4

화면에 표시 할 항목이 너무 많아서 비슷한 문제가있었습니다. VIA PHP를 사용하여 각 행을 1 x 열 테이블로 바꿨습니다. 그래서, n rows = n tables. 그런 다음 마스터 테이블 내의 각 테이블을 중첩했습니다. 그렇게하면 내 스타일 시트에서 td : hover를 호출 할 수있었습니다. 각 td에는 테이블이 있기 때문에 커서를 올려 놓을 때 컬럼을 강조 표시하는 것과 같은 효과가 있습니다.

Answer 5

다음을 사용하여 순수 CSS와 전체 행을 강조 할 수 있습니다 열이 효과를 달성

tr td {background-color: red;} 
tr:hover td {background-color: blue;} 

셀 (TD)로,이 접근 불가능 행 (TR)의 자식이 아닌 란.

IE7 +에서 작동되게하려면 doctype 선언을 추가해야합니다 (항상 어쨌든해야 할 일 :)).

Answer 6

자바 스크립트가없는 CSS를 사용하여이 작업을 수행 할 수 있습니다.

나는 강조를 수행하기 위해 의사 요소 인 ::after을 사용했습니다. z-index은 클릭 이벤트를 처리해야 할 경우에 대비하여 강조 표시를 <tds> 아래로 유지합니다. 거대한 높이를 사용하면 전체 열을 덮을 수 있습니다. <table>의 overflow: hidden은 하이라이트 오버 플로우를 숨 깁니다.

데모 : http://jsfiddle.net/ThinkingStiff/2XeYe/이

출력 :

이

CSS :

이

table { 
    border-spacing: 0; 
    border-collapse: collapse; 
    overflow: hidden; 
    z-index: 1; 
} 

td, th { 
    cursor: pointer; 
    padding: 10px; 
    position: relative; 
} 

td: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>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th> 
    </tr> 
    <tr> 
     <th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td> 
    </tr> 
    <tr> 
     <th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td> 
    </tr> 
    <tr> 
     <th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td> 
    </tr> 
    <tr> 
     <th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td> 
    </tr> 
</table> 

Answer 7

내가 근래 전자보다 간단한 솔루션 (라이브 예 : http://jsfiddle.net/q3HHt/1/)

HTML :

<table> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
</table> 

CSS :

table, td { 
    border: 1px solid black; 
} 

td { 
    width: 40px; 
    height: 40px; 
} 

.highlighted { 
    background-color: #348A75; 
} 

jQuery를 :

$('td').hover(function() { 
    var t = parseInt($(this).index()) + 1; 
    $('td:nth-child(' + t + ')').addClass('highlighted'); 
}, 
function() { 
    var t = parseInt($(this).index()) + 1; 
    $('td:nth-child(' + t + ')').removeClass('highlighted'); 
}); 

이 jsfiddle은 실제에 대한 특정 : 0

라이브 예 : 당신이 JQuery와 코드 부분을 변경 만 실제 테이블에 COLS을 강조하려는 경우 http://jsfiddle.net/q3HHt/1/

Answer 8

그냥에, Muhammads 대답 (https://stackoverflow.com/a/11828637/1316280)를 확장 테이블

jQuery를

$('td').hover(function() { 
    var t = parseInt($(this).index()) + 1; 
    $(this).parents('table').find('td:nth-child(' + t + ')').addClass('highlighted'); 
}, 
function() { 
    var t = parseInt($(this).index()) + 1; 
    $(this).parents('table').find('td:nth-child(' + t + ')').removeClass('highlighted'); 
}); 

jsFiddle : http://jsfiddle.net/q3HHt/123/