如何实现鼠标悬停span文本时显示其ref属性值？

针对你提供的HTML代码，要实现鼠标悬停在带ref属性的<span>文本上时显示该属性值，有两种实用方案：

方案一：纯CSS实现（无需JavaScript） #

利用CSS的attr()函数和伪元素，直接从属性取值并显示提示，实现简单且无额外脚本开销：

/* 给带ref属性的span添加基础样式，提示可交互 */
span[ref] {
  position: relative;
  cursor: help; /* 鼠标变为帮助光标 */
  text-decoration: underline dotted #666; /* 点下划线标记可悬停 */
}

/* 悬停时显示提示框 */
span[ref]:hover::after {
  content: attr(ref); /* 直接获取ref属性的值作为提示内容 */
  position: absolute;
  bottom: 110%; /* 提示框显示在文本上方 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  background-color: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  white-space: nowrap; /* 避免提示内容换行 */
  z-index: 100; /* 确保提示框在最上层 */
}

只需将这段CSS添加到你的样式表中，原HTML无需修改即可生效。

方案二：JavaScript实现（更灵活的自定义效果） #

如果需要更复杂的提示样式（比如动画、多行显示），或兼容不支持attr()的旧浏览器，可以用JavaScript动态创建提示框：

<!-- 原HTML保持不变 -->
<p id="IP08">Uneven development is, precisely that: capitalist
factors (firms, industries, countries) have a common trait, but
<span ref="capitalist factors (firms, industries, countries)">
they</span> show uneven unfolding and cannot be individually
predicted. Since the factors are mutually and interdependently
related, the general trend that we define as the law of uneven
development can be inferred from <span ref="capitalist factors
(firms, industries, countries)">their</span> relationship, which
has a specific connotation, i.e., the difference in the paces of
the factors that make up the relationship itself. Since the general
trend is determined by capitalism’s nature, <span ref="the general
trend">it</span> cannot change without changing the nature of
capitalism itself.</p>

<script>
// 选中所有带ref属性的span元素
const refSpans = document.querySelectorAll('span[ref]');

refSpans.forEach(span => {
  // 创建自定义提示框元素
  const tooltip = document.createElement('div');
  tooltip.className = 'custom-tooltip';
  tooltip.textContent = span.getAttribute('ref');
  tooltip.style.display = 'none';
  document.body.appendChild(tooltip);

  // 鼠标悬停时显示提示框并定位
  span.addEventListener('mouseover', () => {
    tooltip.style.display = 'block';
    const spanRect = span.getBoundingClientRect();
    // 计算提示框位置，居中显示在span上方
    tooltip.style.left = `${spanRect.left + window.scrollX + spanRect.width/2 - tooltip.offsetWidth/2}px`;
    tooltip.style.top = `${spanRect.top + window.scrollY - tooltip.offsetHeight - 8}px`;
  });

  // 鼠标离开时隐藏提示框
  span.addEventListener('mouseout', () => {
    tooltip.style.display = 'none';
  });

  // 可选：鼠标移动时跟随光标
  span.addEventListener('mousemove', (e) => {
    tooltip.style.left = `${e.pageX - tooltip.offsetWidth/2}px`;
    tooltip.style.top = `${e.pageY - tooltip.offsetHeight - 12}px`;
  });
});
</script>

<style>
/* 自定义提示框样式 */
.custom-tooltip {
  position: absolute;
  background-color: #222;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  pointer-events: none; /* 防止提示框干扰鼠标事件 */
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* 添加阴影增强视觉效果 */
}

span[ref] {
  cursor: help;
  text-decoration: underline dotted #666;
}
</style>

这种方案可以自由调整提示框的样式、动画效果，甚至添加关闭按钮等交互功能。

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