From 71528f1cf24534cc6d00bb1c7ce1f6c2db676c3f Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <en3m@ya.ru>
Date: Mon, 29 Aug 2022 16:45:44 +0300
Subject: [PATCH] show copy code button only on hover of container (#751)

---
 .changeset/strong-toes-decide.md       | 7 +++++++
 packages/nextra/src/components/pre.tsx | 2 +-
 packages/nextra/styles/code-block.css  | 4 ++++
 3 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/strong-toes-decide.md

diff --git a/.changeset/strong-toes-decide.md b/.changeset/strong-toes-decide.md
new file mode 100644
index 0000000000..bfe9b3625f
--- /dev/null
+++ b/.changeset/strong-toes-decide.md
@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+show copy code button only on hover of container
diff --git a/packages/nextra/src/components/pre.tsx b/packages/nextra/src/components/pre.tsx
index 80b75e322d..e9fce9047c 100644
--- a/packages/nextra/src/components/pre.tsx
+++ b/packages/nextra/src/components/pre.tsx
@@ -32,7 +32,7 @@ export const Pre = ({
       {hasCopy && (
         <CopyToClipboard
           value={children}
-          className={'absolute m-2 right-0 ' + (filename ? 'top-8' : 'top-0')}
+          className={'opacity-0 transition-opacity absolute m-2 right-0 ' + (filename ? 'top-8' : 'top-0')}
         />
       )}
     </>
diff --git a/packages/nextra/styles/code-block.css b/packages/nextra/styles/code-block.css
index 179aacbdeb..142014db50 100644
--- a/packages/nextra/styles/code-block.css
+++ b/packages/nextra/styles/code-block.css
@@ -46,6 +46,10 @@ pre {
 
 [data-rehype-pretty-code-fragment] {
   @apply relative;
+
+  &:hover > .nextra-copy-button {
+    @apply opacity-100;
+  }
 }
 
 @supports (