Функция не вызывает и не меняет цвет фона при наведении курсора - PullRequest
Новая
       4

Функция не вызывает и не меняет цвет фона при наведении курсора

0 голосов
/ 10 января 2020

Я заполнил контейнер сетками и теперь хочу добавить функциональность, при которой при наведении мыши на ячейки цвет фона меняется.

Пока у меня есть: 


let container = document.getElementById("container");

let createGrid = (row, col) => {
  for(let i = 0; i < (row * col); i++) {
    let cell = document.createElement("div");
    cell.className = ("cell");
    container.appendChild(cell);
  }
}
createGrid(100, 60);

let cells = document.querySelectorAll('container div');
let functionality = () => cells.addEventListener('mouseover', function() {
  cells.style.backgroundColor = "red";
}
);
functionality();

Ответы [ 2 ]

1 голос
/ 10 января 2020

Вы неправильно нацеливаетесь на элементы <div> в querySelectorAll. Кроме того, querySelectorAll возвращает объект NodeList, который состоит из всех запрашиваемых вами элементов div, поэтому вам нужно l oop через каждый элемент в NodeList, используя метод, подобный forEach () , а затем примените стиль к каждому элементу.

Проверьте и запустите следующий фрагмент кода для практического примера вышеуказанного подхода: 

let container = document.getElementById("container");

let createGrid = (row, col) => {
  for(let i = 0; i < (row * col); i++) {
    let cell = document.createElement("div");
    cell.className = ("cell");
    container.appendChild(cell);
  }
}
createGrid(100, 60);

let cells = document.querySelectorAll('#container div');
let functionality = () => cells.forEach(e => e.addEventListener('mouseover', (e) => {
  e.target.style.backgroundColor = "red";
}
));
functionality();
.cell {padding: 5px;}
<div id="container"></div>

NB Вместо нацеливания на все элементы <div> внутри #container, вы можете выбрать все элементы div элементы с именем класса «cell», поскольку вы добавили это имя класса к каждому элементу сетки, и это предотвратит нежелательные css изменения в других типах <div> элементов, которые вы можете добавить к #container в долгосрочной перспективе.

0 голосов
/ 10 января 2020

Если вы не хотите больше ничего делать при наведении курсора, вы можете просто применить CSS следующим образом: 

.cell:hover{
  background-color: red;
}

Если вы хотите сделать это с JavaScript, вам нужно выполнить итерацию по ячейки и добавьте слушателя для каждой ячейки: 

for(var i=0;i<cells.length;i++){
  cells[i].addEventListener('mouseover', function(event) {
  event.target.style.backgroundColor = "red";
});

Цвет при наведении не останется, если вы сделаете это с JavaScript, красный цвет фона останется после выхода из ячейки.

...