Как я могу изменить столбец фона таблицы html столбца, когда мышь над ним?
Предпочтительно только css.
Как я могу изменить столбец фона таблицы html столбца, когда мышь над ним?
Предпочтительно только css.
Работает только для ячеек или строк, извините. например.
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 */
Это можно сделать с помощью CSS без Javascript.
Я использовал псевдоэлемент ::after
, чтобы сделать выделение. z-index
сохраняет подсветку ниже <tds>
, если вам нужно обрабатывать события щелчка. Использование массивной высоты позволяет покрыть всю колонку. overflow: hidden
на <table>
скрывает переполнение выделения.
Демо: 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>
У меня есть более простое решение (пример Live: http://jsfiddle.net/q3HHt/1/)
HTML:
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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');
});
Пример в реальном времени: http://jsfiddle.net/q3HHt/1/
Просто, чтобы продлить ответ Мухаммедам (fooobar.com/questions/272166/...), если вы хотите выделить cols только в фактической таблице, измените jquery-code-part на: этот jsfiddle специфичен только для фактической таблицы
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/
Я не думаю, что есть простой способ HTML + CSS для этого. Javascript является альтернативой, например плагин jQuery tableHover
У меня была аналогичная проблема, когда у меня было слишком много столбцов для отображения на экране. VIA PHP, я превратил каждую строку в таблицу столбцов 1 x. Итак, n rows = n таблиц. Затем я вложил каждую таблицу в основную таблицу. Это позволило мне вызвать td: hover из моей таблицы стилей. Поскольку каждый td провел таблицу, он имеет тот же эффект, что и выделение столбца, когда я наводил на него курсор.
Вы можете попробовать поэкспериментировать с тегом <col>
и col:hover { background: red; }
, но я сомневаюсь, что он сработает. В любом случае, это определенно не будет работать в более старых версиях MSIE, поэтому для этого вам понадобится javascript.
Вы можете выделить всю строку с помощью чистого CSS, используя:
tr td {background-color: red;}
tr:hover td {background-color: blue;}
Достижение этого эффекта для столбца невозможно при таком подходе, поскольку cell (td) является дочерним элементом строки (tr), а не столбцом.
Чтобы заставить его работать в IE7 +, обязательно добавьте объявление doctype (что вы всегда должны делать в любом случае:)).