如何通过CSS实现按钮悬停时显示“点击”类提示消息？

你可以通过CSS的:hover伪类结合::after/::before伪元素来实现按钮悬停时显示提示文本，以下是具体可行的代码方案：

基础实现方案 #

/* 按钮基础样式，必须设置position: relative让伪元素相对按钮定位 */
.button-subscribe {
  position: relative;
  padding: 8px 16px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 默认状态下隐藏提示文本 */
.button-subscribe::after {
  content: "点击"; /* 替换成你需要的提示内容，比如"进入""开始" */
  position: absolute;
  bottom: 100%; /* 提示显示在按钮上方，改成top:100%可放在下方 */
  left: 50%;
  transform: translateX(-50%); /* 让提示文本居中对齐 */
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap; /* 防止提示文本换行 */
  opacity: 0; /* 透明隐藏 */
  visibility: hidden; /* 隐藏元素避免占空间 */
  transition: all 0.2s ease; /* 添加入场过渡动画 */
}

/* 鼠标悬停时显示提示 */
.button-subscribe:hover::after {
  opacity: 1;
  visibility: visible;
}

灵活扩展方案（多按钮不同提示） #

如果需要给不同按钮设置不同提示，不用写多个CSS规则，可结合HTML的data-*属性实现：

HTML代码：

<button class="button-subscribe" data-tooltip="点击">订阅</button>
<button class="button-subscribe" data-tooltip="进入">进入页面</button>

CSS代码：

.button-subscribe {
  position: relative;
  padding: 8px 16px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button-subscribe::after {
  content: attr(data-tooltip); /* 读取按钮的data-tooltip属性值作为提示文本 */
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.button-subscribe:hover::after {
  opacity: 1;
  visibility: visible;
}

内容的提问来源于stack exchange，提问作者Sara Zaheer