4. 编码题：页面上有一个a连接和一个div盒子，盒子刚开始是隐藏的，鼠标移入连接时，让盒子显示出来，移出连接时，让盒子隐藏。特殊要求：请使用W3C标准方法注册事件（考点：移入事件、移出事件、样式操作、addEventListener） （难度系数：☆☆☆）

可以使用以下代码实现：

HTML代码：

<a href="#" id="link">链接</a>
<div id="box" style="display:none;">盒子</div>

JavaScript代码：

var link = document.getElementById("link");
var box = document.getElementById("box");

link.addEventListener("mouseover", function() {
box.style.display = "block";
});

link.addEventListener("mouseout", function() {
box.style.display = "none";
});

在这个代码中，我们使用了addEventListener方法来注册事件，当鼠标移入链接时，盒子的display属性被设置为"block"，从而显示出来；当鼠标移出链接时，盒子的display属性被设置为"none"，从而隐藏起来。

相关问题

一个长方形的div盒子 上中下 平均分为三分

好的，这是一个CSS布局问题。你可以使用flexbox或者grid布局来实现这个效果。具体来说，你可以将长方形的div盒子设置为一个flex容器，并使用flex-direction属性将其设置为垂直方向。然后，将盒子分为上中下三个部分，可以使用flex-grow属性使它们平均分配容器的剩余空间。下面是一个示例代码：

<div class="container">
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

.container {
  display: flex;
  flex-direction: column;
  height: 300px; /* 设置盒子高度 */
}

.top, .middle, .bottom {
  flex-grow: 1; /* 平均分配容器的剩余空间 */
}

.top {
  background-color: red;
}

.middle {
  background-color: green;
}

.bottom {
  background-color: blue;
}

这样，你就可以将长方形的div盒子分为上中下三个部分，并且它们的高度相等。

js中div盒子有四个小div盒子，点击第一个小盒子，则显示这个小盒子，其余不显示

可以使用 JavaScript 来实现这个功能。首先，需要对四个小盒子添加点击事件监听器，当用户点击其中一个小盒子时，就将该小盒子显示，同时将其它三个小盒子隐藏。可以使用以下代码来实现：

<div id="myDiv">
  <div class="box active"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

const boxes = document.querySelectorAll('.box');

boxes.forEach(function(box) {
  box.addEventListener('click', function() {
    // 隐藏所有小盒子
    boxes.forEach(function(box) {
      box.classList.remove('active');
    });
    
    // 显示当前点击的小盒子
    this.classList.add('active');
  });
});

在上面的代码中，首先获取了四个类名为 `box` 的小盒子元素，并使用 `forEach` 方法来遍历它们并为每个小盒子元素添加了一个 `click` 事件监听器。当用户点击其中一个小盒子时，就会触发该事件监听器中的回调函数，你可以在该回调函数中编写处理点击事件的逻辑。在这个例子中，我们首先使用 `forEach` 方法遍历所有小盒子元素，并将它们的 `active` 类名移除，从而隐藏它们。然后，使用 `this` 关键字引用当前被点击的小盒子元素，并为它添加 `active` 类名，从而将它显示出来。最终，只有被点击的小盒子元素会显示出来，其它三个小盒子元素都被隐藏了。