Таблица наведения курсора CSS/Javascript смещена в шахматном порядке ⇐ CSS
Таблица наведения курсора CSS/Javascript смещена в шахматном порядке
У меня есть таблица, и я пытаюсь создать наведение курсора мыши JS/JQuery, которое при наведении курсора мыши на любой из шагов выделяет эту строку для первых четырех столбцов, а затем понижает на 1, как на снимке экрана. В настоящее время я могу навести указатель мыши на всю строку, но не могу понять, как заставить ее перемещаться вперед и назад 1. У меня был JavaScript, но я просто переключился на эффект наведения, так как не мог написать JavaScript для перемещения вперед и назад.
Вот мой текущий код без JavaScript. Я просто вынул его и перешел к эффекту наведения, так как не смог получить его, как я уже сказал, в четырех строках, а затем спустился по лестнице.
Шкала заработной платы – ежемесячно
.table { граница-коллапс: коллапс; ширина: 120%; маржа: 0 атуо; граница: 2 пикселя, сплошная черная; выравнивание текста: по центру; } .таблица, .таблица тд { граница: сплошная 2 пикселя #c0c0c0; отступ: 8 пикселей; выравнивание текста: по центру; } .таблица й { курсор: указатель; цвет фона: #f2f2f2; переход: фоновый цвет 0,3 с; } .table th:hover { цвет фона: #ddd; черный цвет; } .table tr:hover { цвет фона: желтый; черный цвет; вес шрифта: смелый; } Шаг Текущий
06.06.19 ДОР 1 год
01.06.23 2 года
01.06.24 3 года
01.06.25 4 года
01.06.26 1 5645 долларов США 7 233 доллара США 7450 долларов США 7673 доллара США 7903 доллара США 8140 долларов США 2 6060 долларов США 7788 долларов США 8022 доллара США 8 262 доллара 8510 долларов США 8766 долларов США 3 6603 доллара США 8 154 доллара 8398 долларов США 8650 долларов США 8910 долларов США 9 177 долларов США 4 7 114 долларов США 8673 доллара США 8 933 доллара США 9 201 доллар 9 477 долларов США 9 761 доллар США 5 7763 доллара США 9 089 долларов США 9 362 доллара США 9 643 доллара США 9 932 доллара США 10 230 долларов США 6 8312 долларов США 9320 долларов США 9600 долларов США 9 888 долларов США 10 185 долларов США 10 490 долларов США 7 8846 долларов США 9 120 долларов США 10 095 долларов США 10 398 долларов США 10 710 долларов США 11 031 доллар США 8 9 231 доллар США 10 138 долларов США 10 443 доллара 10 756 долларов США 11 078 долларов США 11 411 долларов США 9 9607 долларов США 10 911 долларов США 11 238 долларов США 11 576 долларов США 11 923 доллара 12 120 долларов США 10 9 966 долларов США 11 288 долларов США 11 626 долларов США 11 975 долларов США 12 334 доллара 12 704 доллара 11 10 350 долларов США 12 661 доллар 13 041 доллар США 13 432 доллара 13 835 долларов США 14 250 долларов США 12 10 704 доллара 12 661 доллар США 13 041 доллар США 13 432 доллара США 13 835 долларов 14 250 долларов США 13 11 055 долларов США 12 661 доллар США 13 041 доллар США 13 432 доллара США 13 835 долларов США 14 250 долларов США 14 11 219 долларов США 12 661 доллар США 13 041 доллар США 13 432 доллара США 13 835 долларов США 14 250 долларов США 15 11 507 долларов США 12 661 доллар США 13 041 доллар США 13 432 доллара США 13 835 долларов США 14 250 долларов США
Чего я пытаюсь достичь
У меня есть таблица, и я пытаюсь создать наведение курсора мыши JS/JQuery, которое при наведении курсора мыши на любой из шагов выделяет эту строку для первых четырех столбцов, а затем понижает на 1, как на снимке экрана. В настоящее время я могу навести указатель мыши на всю строку, но не могу понять, как заставить ее перемещаться вперед и назад 1. У меня был JavaScript, но я просто переключился на эффект наведения, так как не мог написать JavaScript для перемещения вперед и назад.
Вот мой текущий код без JavaScript. Я просто вынул его и перешел к эффекту наведения, так как не смог получить его, как я уже сказал, в четырех строках, а затем спустился по лестнице.
Шкала заработной платы – ежемесячно
.table { граница-коллапс: коллапс; ширина: 120%; маржа: 0 атуо; граница: 2 пикселя, сплошная черная; выравнивание текста: по центру; } .таблица, .таблица тд { граница: сплошная 2 пикселя #c0c0c0; отступ: 8 пикселей; выравнивание текста: по центру; } .таблица й { курсор: указатель; цвет фона: #f2f2f2; переход: фоновый цвет 0,3 с; } .table th:hover { цвет фона: #ddd; черный цвет; } .table tr:hover { цвет фона: желтый; черный цвет; вес шрифта: смелый; } Шаг Текущий
06.06.19 ДОР 1 год
01.06.23 2 года
01.06.24 3 года
01.06.25 4 года
01.06.26 1 5645 долларов США 7 233 доллара США 7450 долларов США 7673 доллара США 7903 доллара США 8140 долларов США 2 6060 долларов США 7788 долларов США 8022 доллара США 8 262 доллара 8510 долларов США 8766 долларов США 3 6603 доллара США 8 154 доллара 8398 долларов США 8650 долларов США 8910 долларов США 9 177 долларов США 4 7 114 долларов США 8673 доллара США 8 933 доллара США 9 201 доллар 9 477 долларов США 9 761 доллар США 5 7763 доллара США 9 089 долларов США 9 362 доллара США 9 643 доллара США 9 932 доллара США 10 230 долларов США 6 8312 долларов США 9320 долларов США 9600 долларов США 9 888 долларов США 10 185 долларов США 10 490 долларов США 7 8846 долларов США 9 120 долларов США 10 095 долларов США 10 398 долларов США 10 710 долларов США 11 031 доллар США 8 9 231 доллар США 10 138 долларов США 10 443 доллара 10 756 долларов США 11 078 долларов США 11 411 долларов США 9 9607 долларов США 10 911 долларов США 11 238 долларов США 11 576 долларов США 11 923 доллара 12 120 долларов США 10 9 966 долларов США 11 288 долларов США 11 626 долларов США 11 975 долларов США 12 334 доллара 12 704 доллара 11 10 350 долларов США 12 661 доллар 13 041 доллар США 13 432 доллара 13 835 долларов США 14 250 долларов США 12 10 704 доллара 12 661 доллар США 13 041 доллар США 13 432 доллара США 13 835 долларов 14 250 долларов США 13 11 055 долларов США 12 661 доллар США 13 041 доллар США 13 432 доллара США 13 835 долларов США 14 250 долларов США 14 11 219 долларов США 12 661 доллар США 13 041 доллар США 13 432 доллара США 13 835 долларов США 14 250 долларов США 15 11 507 долларов США 12 661 доллар США 13 041 доллар США 13 432 доллара США 13 835 долларов США 14 250 долларов США
Чего я пытаюсь достичь
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
Анимация наведения — задержка подчеркивания до завершения анимации наведения
Anonymous » » в форуме CSS - 0 Ответы
- 48 Просмотры
-
Последнее сообщение Anonymous
-