html: hover tablo sütunu

Question

Fare bittiğinde bir html tablosunun sütun arka plan sütununu nasıl değiştirebilirim?

Tercihen yalnızca css ile.

Answer 1

Sadece hücreler veya satırlar için çalışır, özür dilerim. , ör.

td { 
    background-color: blue; 
} 

td:hover { 
    background-color: red; 
} 

JavaScript çözümleri bulunmamakta ancak şu an CSS'deki hiçbir şey çünkü seçiciler sınırlamaları istediğini yapacağız.

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

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

/* nothing for all columns */ 

Answer 2

Bunu yapmanın temiz bir HTML + CSS yolu olduğunu düşünmüyorum. Javascript bir alternatiftir, örneğin jQuery tableHover plugin

Answer 3

Sen <col> etiketi ve col:hover { background: red; } tarzı ile deneme deneyebilirsiniz, ama işe şüphe. Her neyse, bu kesinlikle MSIE'nin eski sürümlerinde çalışmayacaktır, bu yüzden bunu yapmak için javascript'e ihtiyacınız olacak.

Answer 4

Ekranda görüntülenecek çok fazla sütunun olduğu benzer bir sorun yaşadım. VIA PHP, her satırı 1 x sütun tablosuna dönüştürdüm. Yani, n satır = n tabloları. Daha sonra her masayı bir master masanın içine yerleştirdim. Bunu yapmak için td: hover'ımı stil sayfamdan aramamı sağladım. Her bir td bir masa tuttuğu için, üzerinde fareyi varken bir sütunun vurgulanmasıyla aynı etkiye sahiptir.

Answer 5

kullanarak saf CSS ile tüm satır vurgulayabilirsiniz: Bir sütun için bu etkiyi başarmak

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

hücre (td) olarak, bu yaklaşımla mümkün değildir üst üste (tr) bir çocuk değil, bir sütun.

IE7 + 'da çalışmasını sağlamak için, doctype bildirimi eklediğinizden emin olun (her zaman ne yapmanız gerekir :)).

Answer 6

Bu, Javascript içermeyen CSS kullanılarak yapılabilir.

Vurgulamayı yapmak için ::after sözde öğeyi kullandım. Tıklama olaylarını işlemeniz gerektiğinde z-index, <tds>'un altındaki vurgulamayı tutar. Büyük bir yükseklik kullanmak, tüm sütunun örtülmesini sağlar. <table>'daki overflow: hidden, vurgu taşmasını gizler.

Demo: http://jsfiddle.net/ThinkingStiff/2XeYe/

Çıktı:

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

Ben hav e daha basit bir çözüm (Canlı örnek: 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'); 
}); 

Bu jsfiddle sadece gerçek özeldir : 0

Canlı örnek: için jquery-kod bölümünü değiştirmek, sadece gerçek tabloda cols vurgulamak istiyorsanız http://jsfiddle.net/q3HHt/1/

Answer 8

Sadece üzere, Muhammed'ler cevap (https://stackoverflow.com/a/11828637/1316280) uzanır tablo

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/