按钮悬停文本切换、点击复制功能的问题求助

问题1：悬停时按钮尺寸变化 #

这个问题源于悬停前后文本宽度不一致，导致按钮容器尺寸跟随变化。提供两种解决思路：

方法1：固定按钮宽度 #

直接给按钮设置足够容纳最长文本的固定宽度，同时让文本居中：

.btn-transparent {
  background-color: transparent;
  border: 2px solid black;
  display: inline-block;
  padding: 14px 35px;
  cursor: pointer;
  transition: 250ms;
  width: 220px; /* 根据最长文本的实际宽度调整 */
  text-align: center;
}

方法2：伪元素重叠定位 #

通过绝对定位让切换的文本伪元素重叠，确保容器尺寸由最长文本决定，悬停时仅切换透明度：

#ip {
  font-size: 16px;
  letter-spacing: 1px;
  text-decoration: none;
  color: black;
  position: relative;
  display: inline-block;
  min-width: max-content;
}

#ip::before, #ip::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  transition: opacity 250ms;
}

#ip::before {
  content: "I AM REALLY COOL 123123";
  opacity: 1;
}

#ip::after {
  content: "Click to copy!";
  opacity: 0;
}

.btn-transparent:hover #ip::before {
  opacity: 0;
}

.btn-transparent:hover #ip::after {
  opacity: 1;
}

问题2：JavaScript处理文本切换与恢复 #

放弃伪元素方案，直接操作span的文本内容，实现更灵活的状态控制：

完整代码 #

HTML

<div style="margin-top: 10px;" class="btn-transparent" id="copyBtn">
  <span id="ip">I AM REALLY COOL 123123</span>
</div>

CSS

.btn-transparent {
  background-color: transparent;
  border: 2px solid black;
  display: inline-block;
  padding: 14px 35px;
  cursor: pointer;
  transition: 250ms;
  text-align: center;
  min-width: max-content;
}

#ip {
  font-size: 16px;
  letter-spacing: 1px;
  text-decoration: none;
  color: black;
}

JavaScript

const copyBtn = document.getElementById('copyBtn');
const ipSpan = document.getElementById('ip');
const originalText = ipSpan.textContent;
const hoverText = 'Click to copy!';
const copiedText = 'Copied!';
const failText = 'Copy failed!';

// 鼠标进入切换文本
copyBtn.addEventListener('mouseenter', () => {
  if (![copiedText, failText].includes(ipSpan.textContent)) {
    ipSpan.textContent = hoverText;
  }
});

// 鼠标离开恢复原始文本
copyBtn.addEventListener('mouseleave', () => {
  if (![copiedText, failText].includes(ipSpan.textContent)) {
    ipSpan.textContent = originalText;
  }
});

// 点击复制逻辑
copyBtn.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('mc.craftanvil.net');
    ipSpan.textContent = copiedText;
  } catch (err) {
    console.error('复制失败:', err);
    ipSpan.textContent = failText;
  }
  // 3秒后自动恢复原始文本
  setTimeout(() => {
    ipSpan.textContent = originalText;
  }, 3000);
});

逻辑说明 #

• 提前保存原始文本，用于后续恢复
• 鼠标进入/离开时，仅在非复制状态下切换文本
• 点击后异步执行剪贴板写入，根据结果显示对应状态文本，3秒后自动恢复原始内容

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