利用鼠标事件与数据属性实现动态模态框内容显示

<div class="container">
  <div class="block-container">
    <div class="block" title="第一个方块" data-content="这是关于第一个方块的详细信息。"></div>
    <div class="block" title="第二个方块" data-content="这是关于第二个方块的详细信息。"></div>
    <div class="block" title="第三个方块" data-content="这是关于第三个方块的详细信息。"></div>
    <div class="block" title="第四个方块" data-content="这是关于第四个方块的详细信息。"></div>
    <div class="block" title="第五个方块" data-content="这是关于第五个方块的详细信息。"></div>
    <div class="block" title="第六个方块" data-content="这是关于第六个方块的详细信息。"></div>
  </div>

  <div class="modal display-none">
    <div class="modal-info">
      <h3 class="modal-title"></h3>
      <p class="modal-paragraph"></p>
    </div>
  </div>
</div>

.block-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 50px;
}

.block {
  background-color: blue;
  height: 50px;
  width: 50px;
  cursor: pointer; /* 提示用户可交互 */
}

.display-none {
  display: none;
}

.modal {
  position: fixed; /* 固定定位，确保模态框始终在视口内 */
  background-color: lightblue;
  width: 30%;
  height: 100px;
  left: 35%; /* 水平居中 */
  top: 10vh; /* 距离顶部10%视口高度 */
  border-radius: 14px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  z-index: 1000; /* 确保模态框在其他内容之上 */
}

.modal-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 10px;
  text-align: center;
}

.modal-title,
.modal-paragraph {
  margin: 0;
  padding: 0;
  color: #333;
}

.modal-title {
  font-size: 1.2em;
  margin-bottom: 5px;
}

.modal-paragraph {
  font-size: 0.9em;
}

// 1. 获取所有需要触发模态框的元素
const boxes = document.querySelectorAll(".block");

// 2. 获取模态框及其内部的标题和段落元素
const modalContainer = document.querySelector(".modal");
const modalTitle = document.querySelector(".modal-title");
const modalParagraph = document.querySelector(".modal-paragraph");

// 3. 遍历每个触发元素，并为其添加事件监听器
boxes.forEach((box) => {
  // 鼠标进入事件
  box.addEventListener("mouseenter", function (e) {
    // 移除模态框的隐藏类，使其显示
    modalContainer.classList.remove("display-none");

    // 获取当前鼠标悬停的元素（即 `this` 或 `box` 变量）的 title 属性
    modalTitle.innerText = this.title; // 或者 box.title

    // 获取当前鼠标悬停的元素（即 `this` 或 `box` 变量）的 data-content 属性
    // 通过 dataset 属性可以访问所有 data-* 自定义属性
    modalParagraph.innerText = this.dataset.content; // 或者 box.dataset.content
  });

  // 鼠标离开事件
  box.addEventListener("mouseleave", function (e) {
    // 添加模态框的隐藏类，使其隐藏
    modalContainer.classList.add("display-none");
  });
});