<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pre Code Copy Button with Hover</title>
<style>
pre {
position: relative;
background-color: #f4f4f4;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
overflow-x: auto;
}
.copy-button {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
opacity: 0; /* 默认隐藏按钮 */
transition: opacity 0.3s ease; /* 添加过渡效果 */
}
pre:hover .copy-button {
opacity: 1; /* 鼠标悬停时显示按钮 */
}
</style>
</head>
<body>
<pre>
<button class="copy-button">复制</button>
<code>
function add(a, b) {
return a + b;
}
const result = add(3, 5);
console.log(result);
</code>
</pre>
<script>
const copyButtons = document.querySelectorAll('.copy-button');
copyButtons.forEach(button => {
button.addEventListener('click', async () => {
const preElement = button.parentNode;
const codeElement = preElement.querySelector('code');
const codeText = codeElement.textContent;
try {
await navigator.clipboard.writeText(codeText);
button.textContent = '已复制';
setTimeout(() => {
button.textContent = '复制';
}, 2000);
} catch (err) {
console.error('复制失败:', err);
}
});
});
</script>
</body>
</html>