html中图片九宫格怎么写，鼠标点击图片后显示文字

要实现图片九宫格并且鼠标点击图片后显示文字，可以使用 HTML、CSS 和 JavaScript。

以下是一个简单的实现方法：

1. 首先，创建 HTML 结构，包含一个 `<div>` 元素和 9 个 `<img>` 元素，如下所示：

<div class="grid">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
  <img src="img4.jpg">
  <img src="img5.jpg">
  <img src="img6.jpg">
  <img src="img7.jpg">
  <img src="img8.jpg">
  <img src="img9.jpg">
</div>

2. 使用 CSS 样式设置 `<div>` 元素为九宫格布局，并设置每个 `<img>` 元素的宽度和高度，如下所示：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

3. 使用 JavaScript 为每个 `<img>` 元素添加点击事件，当鼠标点击图片时，在图片下方显示对应的文字，如下所示：

const images = document.querySelectorAll('.grid img');

images.forEach(image => {
  image.addEventListener('click', () => {
    const text = image.getAttribute('alt');
    const caption = document.createElement('div');
    caption.innerText = text;
    image.insertAdjacentElement('afterend', caption);
  });
});

在这个代码中，我们首先获取所有的 `<img>` 元素，并为每个元素添加一个点击事件。当点击图片时，我们获取图片的 `alt` 属性值，创建一个 `<div>` 元素，并将文字添加到其中，最后将这个 `<div>` 元素插入到图片后面。

通过以上步骤，就可以实现图片九宫格并且鼠标点击图片后显示文字的效果了。