如何在悬停时隐藏内容并仅显示图像？

在前端开发中，可以通过CSS来实现在悬停时隐藏内容并仅显示图像的效果。具体的实现方式可以使用CSS的伪类选择器:hover来控制元素的显示与隐藏。

首先，需要在HTML中定义一个包含图像和内容的容器元素，例如一个div元素。然后，使用CSS设置该容器元素的样式，包括设置宽度、高度、背景图像等。

接下来，使用CSS的:hover伪类选择器来控制容器元素在悬停时的样式。通过设置容器元素的背景图像为透明或者隐藏内容的方式，可以实现在悬停时隐藏内容并仅显示图像的效果。

下面是一个示例的HTML和CSS代码：

HTML代码：

<div class="container">
  <img src="image.jpg" alt="图像">
  <p>内容</p>
</div>

CSS代码：

.container {
  width: 200px;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover;
}

.container:hover {
  background-image: none; /* 或者使用透明背景图像 */
}

.container:hover p {
  display: none;
}

在上述代码中，容器元素的宽度和高度分别设置为200px，背景图像为image.jpg。当鼠标悬停在容器元素上时，通过:hover伪类选择器来改变容器元素的样式。在悬停时，将背景图像设置为none或者透明背景图像，同时隐藏内容元素p。

这样，当鼠标悬停在容器元素上时，内容元素将被隐藏，只显示图像。