Как изменить задний фон таблицы при наведении на неё мышкой?

Рейтинг: 0Ответов: 1Опубликовано: 19.03.2023

Есть таблица. Нужно подсвечивать её ячейки определённым цветом при наведении на них. После нажатия на кнопку при наведении хотя бы на одну ячейку вся таблица должна менять задний фон. Проблема состоит в том, что никак не получается отследить наведение на всю таблицу (только на конкретные ячейки). Мои попытки решить задачу отражены в коде.

    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');
       }
     }

Ответы

▲ 0

К сожалению, тк вы не предоставили полного кода, я могу лишь дать вам наводку без примеров кода. Если вы хотите изменять цвет всей таблицы при наведении на ячейку - вам нужно в событии, которое срабатывает при наведении на ячейку при нажатой кнопке(когда должен меняться цвет таблицы), использовать клетка.parentElement.style="background-color: #ваш цвет"