html+js+css做一个鼠标碰到文字，下面会显示图片

好的，这个可以通过JavaScript监听鼠标移动事件，并获取到鼠标所在位置的文字，然后根据文字显示对应的图片。以下是一个简单的实现示例：

HTML代码：

<p>这是一段文字，鼠标碰到“文字”两个字会显示一张图片。</p>
<div id="image-container"></div>

CSS代码：

#image-container {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript代码：

var text = "文字"; // 需要匹配的文字
var imgSrc = "path/to/image.jpg"; // 图片路径
var imgWidth = 200; // 图片宽度
var imgHeight = 200; // 图片高度

var container = document.getElementById("image-container");

document.addEventListener("mousemove", function(event) {
  var target = event.target;
  if (target.nodeName === "P" && target.innerText.includes(text)) {
    container.innerHTML = "<img src='" + imgSrc + "' width='" + imgWidth + "' height='" + imgHeight + "'>";
    container.style.display = "block";
    container.style.top = event.clientY + "px";
    container.style.left = event.clientX + "px";
  } else {
    container.style.display = "none";
  }
});

解释一下代码：

首先定义了需要匹配的文字、图片路径、图片宽高等变量。然后获取到图片容器的DOM元素，并监听整个页面的mousemove事件。在事件回调函数中，先判断鼠标所在的目标元素是否是p标签，且该标签内包含需要匹配的文字。如果是，则将图片容器的innerHTML设置为img标签，并根据鼠标位置设置图片容器的位置，并将其display属性设置为“block”。如果不是，则将图片容器的display属性设置为“none”，以隐藏图片容器。