三个div 鼠标滑过每个div 加一个边框 并可以独立点击

为了实现这个功能，你可以使用HTML和CSS来创建三个`<div>`元素，并结合JavaScript处理鼠标悬停和点击事件。以下是基本步骤：

1. HTML结构:

<div class="box" id="div1">Div 1</div>
<div class="box" id="div2">Div 2</div>
<div class="box" id="div3">Div 3</div>

2. CSS样式:

.box {
  width: 200px;
  height: 200px;
  border: none;
  cursor: pointer; /* 显示默认的指针 */
}

.box:hover {
  border: 2px solid #000; /* 鼠标悬停时添加边框 */
}

3. JavaScript (纯CSS的话也可以直接实现，但这里还是给出一个示例):

// 获取所有的盒子
const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.addEventListener('click', function() {
    // 点击时可能需要做的操作（如显示内容、改变状态等）
    console.log(`Clicked on div ${this.id}`);
  });
});

当用户鼠标悬停在每个`<div>`上，它们会获得边框效果；而点击时，相应的点击事件会被触发。