Как изменить задний фон таблицы при наведении на неё мышкой?
Есть таблица. Нужно подсвечивать её ячейки определённым цветом при наведении на них. После нажатия на кнопку при наведении хотя бы на одну ячейку вся таблица должна менять задний фон. Проблема состоит в том, что никак не получается отследить наведение на всю таблицу (только на конкретные ячейки). Мои попытки решить задачу отражены в коде.
let cell = document.getElementById('my_table');
cell.onmouseout = function (evt)
{
console.log(sessionStorage.getItem('button_one'));
evt.target.style.background = 'white';
evt.target.style.color = 'black';
evt.target.style.fontSize = '16px';
}
cell.onmouseover = function (evt)
{
let color_1 = sessionStorage.getItem('color_1');
let color_2 = sessionStorage.getItem('color_2');
let font = sessionStorage.getItem('font');
if (sessionStorage.getItem('button_one') == 'off')
{
evt.target.style.background = color_1;
evt.target.style.color = color_2;
evt.target.style.fontSize = font;
}
else
{
console.log('второй вариант');
my_table.style.backgroundColor = sessionStorage.getItem('color_1');
my_table.style.color = sessionStorage.getItem('color_2');
my_table.style.fontSize = sessionStorage.getItem('font');
}
}
Источник: Stack Overflow на русском