Question

我被要求构建一个HTML和CSS页面，其中包含4个不同的彩色正方形，它们的大小互为两倍（例如，第一个2x2 px，第二个4x4，第三个8x8和第四个16x16），以及当光标悬停在正方形上时，相应的正方形会收到其旁边正方形的颜色。

Answer 1

这是您的简短摘要。它显示了主要概念，然后您可以通过某种方式对其进行调整，以准确实现所需的功能。

const INIT_SIZE = [20,20];
const COLORS = ['red','green','blue','yellow'];

const squares = COLORS.map((color, index) => {
  const el = document.createElement('div');
  el.style.width = INIT_SIZE[0] * Math.pow(2, index) + 'px';
  el.style.height = INIT_SIZE[1] * Math.pow(2, index) + 'px';
  el.style.backgroundColor = color;
  document.body.appendChild(el);
  return el;
});

squares.forEach((sq) => {
  sq.addEventListener('mouseover', (ev) => {
    const tgt = ev.target;
    const curr = squares.indexOf(tgt);
    const newIndex = (curr + 1) == squares.length ? 0 : (curr + 1);
    tgt.style.backgroundColor = squares[newIndex].style.backgroundColor;
  })
})

Answer 2

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<style>
 .box1{
  width:20px;
  height:20px;
  background-color:blue
}
 .box2{
  width:40px;
  height:40px;
  background-color:black
 }
.box3{
  width:80px;
  height:80px;
  background-color:yellow
}
.box4{
 width:160px;
 height:160px;
 background-color:green
} 
<script>
 document.querySelector(".box1").addEventListener("mouseenter",function(){
 document.querySelector(".box3").style.backgroundColor="red";
})
<style>

这是演示的链接，该链接针对第一个框执行此操作。您必须设置应该手动更改的框 https://jsfiddle.net/xj60tq4d/1/

如何建立和操纵4个正方形的颜色？

2 个答案: