如何使用mouseover和mouseout事件来改变所有生成的div /grid-item的背景颜色

我正在完成"蚀刻素描";挑战作为TOP课程的一部分。我已经成功地利用JS DOM操作和CSS网格创建了一个16 × 16的网格。我的问题的第二部分是使每个单独的网格项目/单元格改变背景颜色悬停。我选择使用JS与鼠标悬停事件监听器，但也看到CSS: hover选择器作为一个可行的选择，当谷歌搜索信息。

我已经创建了两个函数overing和outing来改变网格项目的背景颜色，使用"鼠标悬停"。事件监听器。这些函数只作用于第一个生成的单元格/网格项。可能有人请解释我如何能得到我的覆盖和郊游功能工作在所有网格项目。只有第一个网格项工作

//Function and call to generate 16x16 grid of divs. 
document.getElementById("container");
function makeGrid(rows, cols) {
container.style.setProperty('--grid-rows', rows)
container.style.setProperty('--grid-cols', cols)
for (c = 0; c < (rows * cols); c++) {
let cell = document.createElement("div");
cell.innerText = (c + 1);
container.appendChild(cell).className = "grid-item";
};
};
makeGrid(16, 16);
//Function to change background color of individual "grid-item" on hover.
document.querySelector('.grid-item').addEventListener('mouseover', overing);
document.querySelector('.grid-item').addEventListener('mouseout', outing);
function overing(ev) {
ev.currentTarget.style.backgroundColor = 'red';
console.log('mouseenter div');
}
function outing(ev) {
ev.currentTarget.style.backgroundColor = 'white';
console.log('mouseleave div');
}

:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(var(--grid-cols), 1fr);
grid-template-rows: repeat(var(--grid-rows), 1fr);
}
.grid-item {
padding: 1em;
border: 1px solid black;
text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sketch-Book</title>
<link rel="stylesheet" type="text/css" href="etchStyles.css" />
</head>
<body>
<div id="container">
</div>
</body>
<script type="text/javascript" src="etchScript.js"></script>
</html>

@Titus是对的。但是，由于使用javascript创建每个DOM节点，因此可以利用这一事实在创建时附加事件侦听器。例:

const overing = (ev) => {
ev.currentTarget.style.backgroundColor = 'red';
//console.log('mouseenter div');
};
const outing = (ev) => {
ev.currentTarget.style.backgroundColor = 'white';
//console.log('mouseleave div');
}
const makeGrid = (rows, cols) => {
container.style.setProperty('--grid-rows', rows)
container.style.setProperty('--grid-cols', cols)
for (c = 0; c < (rows * cols); c++) {
let cell = document.createElement("div");
cell.innerText = (c + 1);
cell.classList.add('grid-item');

//  attach listeners here since you have a reference to the DOM node
cell.addEventListener("mouseover", overing);
cell.addEventListener("mouseout", outing);

container.appendChild(cell);
};
};
makeGrid(16, 16);

section {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(var(--grid-cols), 1fr);
grid-template-rows: repeat(var(--grid-rows), 1fr);

}
.grid-item {
padding: 1em;
border: 1px solid black;
text-align: center;
}
.grid-item:hover {
cursor: pointer;
}

<section>
<div id="container">
</div>
</section>

你可以使用css:hover，这里是一个3x3网格的例子:

.grid {
display: grid;
grid-template: repeat(3, 30vh) / repeat(3, 30vw);
background-color: white;
height: 94vh;
width: 94vw;
grid-row-gap:1vh;
grid-column-gap:1vw;
}
.grid_element {
display: flex;
height: 100%;
width: 100%;
background-color: gray;
}
.grid_element:hover {
background-color: red;
}

<div class="grid">
<div class="grid_element"></div>
<div class="grid_element"></div>
<div class="grid_element"></div>
<div class="grid_element"></div>
<div class="grid_element"></div>
<div class="grid_element"></div>
<div class="grid_element"></div>
<div class="grid_element"></div>
<div class="grid_element"></div>
</div>

所有现代浏览器都支持模板ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template，所以让我们使用模板ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template，而不是手动创建一个元素，这样我们的代码可以更小-特别是当你为每个"单元格"添加更多内容时;例如一组span,div等

你可以决定你想要的事件处理程序，但你可以在创建它们时将它们添加到同一个循环中。

注意:可能想要创建一个新的DIV，只是为了在点击DOM并立即添加它们之前附加所有的new项，但我将把这个练习留给你作为问题范围之外。

function makeGrid(rows, cols) {
const container = document.getElementById("container");
const template = document.getElementById("grid-cell-template");
for (let c = 0; c < (rows * cols); c++) {
const cloneCell = template.content.cloneNode(true);
const newItem = cloneCell.querySelector(".grid-item");
newItem.textContent = (c + 1);
newItem.addEventListener('mouseenter', mouseEnterEventHandler);
newItem.addEventListener('mouseleave', mouseLeaveEventHandler);
newItem.addEventListener('mouseover', mouseOverEventHandler);
container.appendChild(newItem);
}
}
makeGrid(16, 16);
function mouseEnterEventHandler(event) {
event.currentTarget.style.backgroundColor = '#FF000022';
}
function mouseLeaveEventHandler(event) {
event.currentTarget.style.backgroundColor = '#FFFFFF';
event.target.style.borderColor = "#000000";
}
function mouseOverEventHandler(event) {
event.target.style.borderColor = "#00FF00";
}

body {
font-size: 16px;
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--grid-cols: 16;
--grid-rows: 16;
}
#container {
display: grid;
grid-gap: 0.5em;
grid-template-columns: repeat(var(--grid-cols), 1fr);
grid-template-rows: repeat(var(--grid-rows), 1fr);
}
.grid-item {
padding: 1em;
border: 1px solid #000000;
text-align: center;
}

<body>
<div id="container">
</div>
<template id="grid-cell-template">
<div class="grid-item"></div>
</template>
</body>

相关内容

最新更新

热门标签：